I’m sure we all have a @todo list for a project we have worked on, this week I finally caught up and started to move from grunt to gulp.
This was largely done for three reasons 1. take advantage of gulp’s code over configuration to trim down the amount of config, 2. to make my code modular (this could have been done in grunt) and to 3. tidy up a few changes in my build.
Thankfully I’d already done a couple of different Express projects that use gulp, so I wasn’t starting fresh.
My original gulp file was based mostly on the gov-uk-prototype grunt file with a few additional tasks, such as a file package.
My starting point to converting to gulp was to work out roughly what the scripts needed to do, this helped define some required tasks, these are:-
clear - this removes the public assets folder
copy - move any assets from your folder to public assets folder
js - used to compile modular JS
js-lint - used to lint js
nodemon - watches and restarts various files
package - creates a versioned tar (based pom.xml)
sass - used to compile sass
sass-lint - used to lint
watch - keep an eye on various assets and re-compiles them when required.
Splitting out these tasks made it easier to build up different functionality so for example with the sass compile script it does the following
auto-prefixer to the last two versions compile sass output to a folder minify CSS src maps
The grunt script was also moving a lot of files, due to the excellent things like govuk-elements-sass I could remove this making the sass compilation process a lot smoother.
One of the main reason for splitting these into separate files was also to make certain aspects optional, so you can lint but not compile. It also makes it easier to change tasks without changing the whole file, and easily add in tasks later.