Watch for Changes
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
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:
| // ... 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']:
| // ... 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:
| // ... 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:
| // ... 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:
| // ... 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:
| // ... 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.
If you're working with Gulp 4 it would work
gulp.task('default', gulp.series('sass', function() {
// default task code here
}));
or just without default function
gulp.task('default', gulp.series('sass'));