This is the 3rd part of my series Introduction to Gulp.js. Today I will write the build task, which will execute all other tasks needed for a build, the task to delete assets for a fresh start, and the task to create my Jekyll site.
- 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
Now I create a
build task. This task will run all other tasks, which are needed to create the site. By default Gulp.js runs all tasks in parallel. That’s why I will get a problem if a specific order is needed. I will need a node module which runs tasks in a sequence:
$ npm install --save-dev firstname.lastname@example.org
Next I create the task:
sass task is finished I replace links to small PNG files with Base64 encoding to inline them in my CSS files.
You should comment out tasks, we haven’t written until now, or Gulp can not run. I just included them so we don’t need to come back for each task we write and add a line.
To wipe out all files in the asset folder I use the node module
$ npm install --save-dev email@example.com
I need to add a config for deleting:
The actuall task will look like this:
If you use a newer version of
del or run into trouble, because
del doesn’t finish, try deleting the
callback from the function.
Next I will write the configuration and the task to create the Jekyll site:
There is a gulp plugin for Jekyll, but it’s alpha and was blacklisted, because it’s not needed as you can run shell tasks with node. But I have to send the
done status, when the task is finished.
All this task is doing is running
jekyll build with some options. I use
app as the source folder,
build/development as the target and point to my
I put my
_config.yml and other configuration files always at the root of my project. If you don’t like that, you need to update the configuration to point to the location of your
I have a second Jekyll build task
jekyll-rebuild, which is only a wrapper for a rebuild. All it does is reloading the Browser when the build is completed.
This concludes the 3rd part of my series Introduction to Gulp.js. We learned how to run files in a specified order with
run-sequence, how to delete files and folders and how to execute a shell task like Jekyll.