grunt to gulp, and a bit of refactoring

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.