Andrew Hall


Future of Web Apps – Session 5 – GulpJS – Jack Franklin

This was live blogged – there will be mistakes

In a front end developers workflow we do things over and over again. Concatting, minifying etc

Developers are lazy and they don’t want to do these things.
There are a bunch of tools for automating these jobs.

In JavaScript, we have tools such as grunt or gulp

It’s very inefficient to run a file through several steps where each step is reading a file from the disk, changing something and writing it back.
Gulp changes this by using streams, opening the file once, changing it in each step in memory and then writing it out at the end.

Streams are a concept from Node.
Instead of for example reading a whole file into memory and then writing it out, you can read in parts and write each chunk out

You can install gulp via npm. You first need to install it globally and then also locally for each project.
You then need to create a gulp file which is like the configuration file for what gulp is to run.
In grunt you spend a lot of time configuring plugins but in gulp you have to do more of the work yourself but this gives you better flexibility.

Gulp.src is the main way of grabbing files and putting them into a stream. We can use globbing techniques to match the list of file we want to pass into our gulp work stream.

So how would we do a minification task?
We create a task called minify, use gulp.src to choose what files we want, then pipe it into the uglify plugin and then we push it out to the disk again with piping.

Gulp.dest is the part where we push the stream out to disk and we need to make sure we do this explicitly.

For concatenation and minification we create a task called min, then again use gulp.src to choose our files to bring in before passing into concat and uglify before explicitly writing to disk.

We can watch files and run gulp tasks automatically. We just create a task that will run a particular task on the selection of files that you specify.

In gulp, tasks run with maximum concurrently, probably most tasks don’t require to be done in s particular order, but there is the odd occasion there this needs to be done. You can use callbacks in gulp to do this by passing the actually callback or by passing the stream and other tasks can watch for the end event and you can setup dependencies in your task

It’s more common to see large tasks that do lots of things instead of smaller separate tasks. Because gulp is just JavaScript we can abstract this again if we want to whatever layer we want to.

Remember: gulp is just JavaScript. You don’t necessary need a gulp plugin you can use a regular node plugin.

Gulp 4 is on its way and there will be some changes.
1) better dependencies
2) API cleaned up
3) error handling

Grunt and gulp are both useful tools and it doesn’t mean that one is necessarily better than another. With grunt it’s easy to use as it’s just configuration but gulp gives you more flexibility and control.

Be lazy and automate.
Try it, iterate and improve.

Leave a comment or tweet me