Introduction to Gulp.js 8: Watch for Changes
This is the 8th part of my series Introduction to Gulp.js. Today I will set up watch tasks for many different files with Gulp.js.
Do you remember the watch task from the beginning? It just started BrowserSync and the development server until now, but didn’t watch for anything. I will write these watch tasks now.
Watch is part of the API of gulp. It will watch files for changes, addition or deletion and trigger tasks.
I watch for a lot of different file types for Jekyll. Changes in configuration files, data files, layouts, includes, plugin, posts etc.
I set up six watch tasks. Whenever a file of the Jekyll watch gets changed, deleted or added, the jekyll-rebuild task gets executed. This task will run the Jekyll build and after it’s finished reload the page.
For SCSS files I run the sass tasks and additionally I run a scsslint task, which will check my files for syntax errors.
If I add, modify or delete a SVG file my vector fonts get recreated. And as a fallback for browsers without vector font support I create a PNG sprite map, whenever I change an image of the sprite. It would be possible to auto create the PNG files of the SVG files with gulp-svg2png, but I have some additional design on the sprite images, that’s why I don’t use it.
I miss now three tasks: scsslint, jshint and sprites.
This concludes the 8th part of my series Introduction to Gulp.js. We learned how to use Gulp.js to watch for changes, deletion or creation of files and how to trigger tasks. And the best part: This is part of the Gulp.js API. We don’t need any plugin.
This article was first published on stefanimhoff.de