Watch for Changes

Edit on GitHub

This all looks fun, until you realize that every time you change your Sass file, you have to run Gulp again. That's not going to work - Gulp needs to run automagically when a file changes.

Well, there's magic to handle this called watch(), and for once, it comes native with Gulp itself.

Creating a Second Task

But first, let's create a second task, which we can do just by using gulp.task() like before. Let's move the guts of the default task into this new one:

            
            14 lines
            
            gulpfile.js
        
                                                    ... lines 1 - 4
                            
            gulp.task('sass', function() {
        
                gulp.src('app/Resources/assets/sass/**/*.scss')
        
                    .pipe(sourcemaps.init())
        
                    .pipe(sass())
        
                    .pipe(sourcemaps.write('.'))
        
                    .pipe(gulp.dest('web/css'));
        
            });
        
            gulp.task('default', ['sass']);

Hey! Now we have 2 tasks: sass and default. To prove it, we can run gulp sass and it does all our good stuff.

For now, when I run the default task, I just want that to run the sass task. To do this, replace the function callback with an array of task names. So, ['sass']:

            
            14 lines
            
            gulpfile.js
        
                                                    ... lines 1 - 12
                            
            gulp.task('default', ['sass']);

And actually, you can still have a callback function - now it would be the third argument. Gulp will run all the "dependent tasks" first, then call your function. Handy!

So if we just run gulp, it runs the sass task first.

We're clearly dangerous, so add a third task called watch. The name of the task isn't important, but this fancy gulp.watch function is. Copy the *.scss pattern and pass it to watch(). This tells it to watch for changes in any of these files. The moment it sees something, we want it to re-run the sass task. So put that as the second argument:

            
            18 lines
            
            gulpfile.js
        
                                                    ... lines 1 - 12
                            
            gulp.task('watch', function() {
        
                gulp.watch('app/Resources/assets/sass/**/*.scss', ['sass'])
        
            });
        
                                                    ... lines 16 - 18

Isn't that nice? Find your terminal and try out gulp watch. It runs, but then hangs and waits. Go to the browser and refresh. Things look totally normal. Now, go into styles.scss. Channel your inner-designer. Let's change the dinosaur names to be a majestic vermillion.

Back to the browser! Refresh! That's some nice vermillion. In the background, evil self-aware robots, I mean, the watch function, was doing our job for us and re-running the sass task. Change that color back to black and refresh. Instantly back to boring.

Configuration Variables

But we are starting to have some duplication - I've got the app/Resources/assets/... path in 2 places. This is just normal JavaScript, so let's create a variable called config. Hey! I'll even add the equals sign. Let's store some paths on here, like assetsDir set to app/Resources/assets and sassPattern set to sass/**/*.scss:

            
            23 lines
            
            gulpfile.js
        
                                                    ... lines 1 - 4
                            
            var config = {
        
                assetsDir: 'app/Resources/assets',
        
                sassPattern: 'sass/**/*.scss'
        
            };
        
                                                    ... lines 9 - 23

Now we can just use these variables - classic programming! So,config.assetsDir, a / in the middle, then config.sassPattern. Put that in both places:

            
            23 lines
            
            gulpfile.js
        
                                                    ... lines 1 - 9
                            
            gulp.task('sass', function() {
        
                gulp.src(config.assetsDir+'/'+config.sassPattern)
        
                                                    ... lines 12 - 15
                            
            });
        
                                                    ... line 17
                            
            gulp.task('watch', function() {
        
                gulp.watch(config.assetsDir+'/'+config.sassPattern, ['sass'])
        
            });
        
                                                    ... lines 21 - 23

To stop the watch task, type ctrl+c. I'll run gulp sass to make sure I didn't break anything. It's happy with the config!

Making the default Task Useful

Whenever we start working on a project, we'll want to run the sass task to initially process things and then watch for future stuff. Hmm, what if we made the default task do this for us? Add watch to the array:

            
            23 lines
            
            gulpfile.js
        
                                                    ... lines 1 - 21
                            
            gulp.task('default', ['sass', 'watch']);

Now just run gulp! It runs sass first and then starts watching for changes. That's really nice.

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=5.3.3",
        "symfony/symfony": "2.6.*", // v2.6.4
        "doctrine/orm": "~2.2,>=2.2.3", // v2.4.6
        "doctrine/doctrine-bundle": "~1.2", // v1.2.0
        "twig/extensions": "~1.0", // v1.2.0
        "symfony/assetic-bundle": "~2.3", // v2.5.0
        "symfony/swiftmailer-bundle": "~2.3", // v2.3.7
        "symfony/monolog-bundle": "~2.4", // v2.6.1
        "sensio/distribution-bundle": "~3.0", // v3.0.9
        "sensio/framework-extra-bundle": "~3.0", // v3.0.3
        "incenteev/composer-parameter-handler": "~2.0", // v2.1.0
        "hautelook/alice-bundle": "~0.2" // 0.2
    },
    "require-dev": {
        "sensio/generator-bundle": "~2.3" // v2.4.0
    }
}

Edit on GitHub

COURSE

Gulp! Refreshment for Your Frontend Assets

Watch for Changes

Keep on Learning!

Creating a Second Task

Adding the watch Task

Configuration Variables

Making the default Task Useful

Leave a comment!

What PHP libraries does this tutorial use?

	... lines 1 - 4
	gulp.task('sass', function() {
	gulp.src('app/Resources/assets/sass/*/.scss')
	.pipe(sourcemaps.init())
	.pipe(sass())
	.pipe(sourcemaps.write('.'))
	.pipe(gulp.dest('web/css'));
	});

	gulp.task('default', ['sass']);

	... lines 1 - 12
	gulp.task('watch', function() {
	gulp.watch('app/Resources/assets/sass/*/.scss', ['sass'])
	});
	... lines 16 - 18

	... lines 1 - 4
	var config = {
	assetsDir: 'app/Resources/assets',
	sassPattern: 'sass/*/.scss'
	};
	... lines 9 - 23

	... lines 1 - 9
	gulp.task('sass', function() {
	gulp.src(config.assetsDir+'/'+config.sassPattern)
	... lines 12 - 15
	});
	... line 17
	gulp.task('watch', function() {
	gulp.watch(config.assetsDir+'/'+config.sassPattern, ['sass'])
	});
	... lines 21 - 23