It has been on my to-do list for a few months now but I hadn’t got round to it. Thankfully one of the lads at work set about updating our FE workflow using Gulp and I took the chance to make use of his work, learn it and implement it into Base.

The setup of the gulp file isn’t massively different from grunt. Tasks are ‘piped’ which means they’re much faster, you can read about why here.
I’m not going to go into massive detail about how to write the Gulp setup. I would recommend you download Base and have a play, or check out this cool tutorial.

Here are some of the main tasks I NEED in my FE setup.

• Compile SASS
• Concatenate files (JS/CSS)
• minify CSS
• minify JS

There are tons of packages available via NPM/Node for task managers and Base now has some very cool features.

• autoprefixer – Prefixing can get a little annoying when writing CSS. With autoprefixer you set the lowest browser versions that need support and then just write standard CSS rule. If it needs a prefix it will add it
• jshint – a tool that helps to detect errors and potential problems in your JavaScript code. Code won’t compile unless it’s checked and approved.
• cssGlobbing – Each time you add a new SASS file you need to reference it somewhere. With Globbing you can reference a folder and all the files within that folder will be added
• imagemin – Enables image compression. Many options to choose from, including the optimisation levels. I only run this task on deployment
• notify – This can display various messages, such as when a task encounters an error or when there’s a successful build. I can set these notifications anywhere through the Gulp tasks.
• sourcemaps – This provides mapping from compiled resources to their source files. E.g you can inspect a CSS rule in the console and it will tell you which SASS file it’s in. Read more about that here
• browserSync – My absolute fave. This basically keep multiple browsers & devices in sync when building websites. I can load a page on multiple devices and each time I save the pages are reloaded. What’s more if you scroll down the page on one device all the other screens will scroll too, cool eh!

 Verdict

When I first got it running the first thing I noticed is that it’s fast! Like super fast! It’s running the tasks at a fraction of a second,whereas my grunt tasks were taking 1-2 seconds. These seconds really do add up, especially when you’re a fast coder.

I’m really, really happy with my new setup. I know I could have had most – if not all – of these tasks on my previous grunt setup but I never got round to it. I also didn’t really want to add more functionality to something that was already taking a second or two to run each time I saved a file. The Gulp speed has really won me over.

However it’s really a matter of preference and circumstance. Grunt has a larger community, a little reading also tells me that it’s easier to configure, both for the little built-in set of simple tasks and for more complex setups. There’s no right or wrong way, just go with what’s best for you after you’ve explored your options. For me, Gulp is great.

Please check out the new Base template setup at base.webknit.co.uk. If anyone has any suggestions or recommendations feel free to tweet me . Thanks for for his work & assistance with this.

• Learning
• WebKnit