Introduction to Gulp.js 3: Build, Clean and Jekyll
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.
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:
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 del.
$ 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 _config.yml.
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 _config.yml.
To bundle or not to bundle
Be carefull: If you didn’t install Jekyll with a Gemfile you’ll have to change the Jekyll tasks and remove the bundle exec part. Instead of return cp.spawn(‘bundle’, [‘exec’, ‘jekyll’ … you write return cp.spawn(‘jekyll’, [‘build’, ‘-q’ …. All other options stay the same.
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.
This article was first published on stefanimhoff.de