Buy

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.

Adding the watch Task

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.

Leave a comment!

  • 2016-05-13 weaverryan

    Hi there!

    I haven't used it before, but there is some integration with Gulp and PhpStorm that you might find interesting! https://www.jetbrains.com/help...

    And yes, you could of course run it with &, but obviously it's really the same. With some technologies - I'm not sure about gulp, but webpack has this - they are starting to allow you to run "development" web servers - where your CSS/JS calls actually proxy through a web server and are returned dynamically. This removes the need for a "watch" process. But, these watch processes are still pretty common overall.

    Cheers!

  • 2016-05-12 Kaizoku

    So when I open my editor and start to code I have first to launch the terminal and run the sass task ?

    Is there a way to have this done automatically in PHPStorm ?

    Also it's quite anoying to have a terminal window open and stuck running sass. I know I could do > sass & to run it in background but I'm sure there is something better. isn't it ?