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.
- Intro and Setup
- Server with BrowserSync and Configuration
- Build, Clean and Jekyll
- Creating CSS with Sass (and Compass)
- Images and Vector Fonts
- Base64 Encoded Images
- Watch for Changes
- Generating CSS Image Sprites
- Production Build, Server and Jekyll
- Deploying the Website with Rsync
- Performance Improvements with WebP and Gzip
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.
The Sass task will watch for changes in files with the suffix
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.
SCSS files I run the
sass tasks and additionally I run a
scsslint task, which will check my files for syntax errors.
scripts tasks and a
jshint 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:
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.