Full Circle Magazine FR

Ceci est une ancienne révision du document !

Back in issue 87, I introduced readers to Node.JS and the task runner “Grunt”. I recently discovered an alternative called Gulp, which appeals to me a bit better (more on that soon). Around the same time, a reader asked if I could cover Gulp in C&C. So here it is.

What’s the difference?

The difference between Gulp and Grunt is mainly in their approach to the running of tasks. Grunt focuses on a configuration-based system where you define each task’s configurations (files, compression, plugin to use, etc). Whereas Gulp focuses on a streaming workflow - that means one plugin for one task (no overlap), and is more programmatic than configuration-based. This means the Gulp tasks look more like a JavaScript function that uses a series of callback functions with each configuration step. It may be easier to see the difference by simply covering how Gulp works. If you want a presentation on the differences, see the further reading section.

Example repository

The repository can be found on GitHub here: https://github.com/lswest/FCM93-Gulp-Example

Gulpfile.js

This is the file that creates and organizes the tasks Gulp is supposed to run. The first 7 lines of the file (the var name = require(‘name’);) simply initialize the various Node.JS packages you need. These need to have been installed with npm first – if you have your package.json file, simply running npm install will be sufficient.

The reason why you place the extensions into variables is to make calling them easier, and the reason they’re required is to enable the usage of npm packages like Stylus from within gulp.

In the example file, I then create two tasks. The ‘app’ task starts on line 9 and runs to line 21. The ‘uglify’ task is on lines 23-28. The names of the tasks are arbitrary.

The app Task

This task is intended to compile preprocessor CSS files into CSS - I use it for stylus, but the same idea applies to SASS and Less (so long as you have the correct packages installed).

The task starts with first running gulp.src - which tells it where to find the stylus file(s). It should be possible to concatenate or use an *.styl call to open all stylus files. As, however, the best practice is to reduce the number of css files a site has to call, using only one stylus file to compile is best. Use the @import function to include other stylus files, so that there is only one resulting CSS file.

Afterwards, there’s a pipe function called on the .src, where the stylus function is called with a small list of settings. The setting use tells it what stylus plugins to call (in my case, I am using only Jeet for the Jeet Framework). Compress, as you might imagine, controls the setting for compressing files (minifying the CSS). The sourcemap array controls a few settings for creating a source map file as well, so that the browser inspector gives you line numbers relevant to the original stylus file, as opposed to referencing the minified CSS file. This is useful for developing, but can be left out if you’d prefer.

Last but not least, .pipe(gulp.dest('./css/')); sets the destination folder for the created files.

Hopefully by now the term “stream-based” is making more sense. Each function call has one purpose, and it’s strung together one step at a time (into a stream), until you have your final result.

The ‘Uglify’ Task

The idea behind this task is to concatenate all JavaScript files, and then minify the result. This makes it much less human-readable, but reduces the file size and the number of external files a website has to use. Hence the term “uglify”.

This task begins again with a gulp.src function call (that selects all js files in the folder “js”).

After that, it calls three pipe functions. The first one concatenates (combines) all the js files, then runs the uglify function (minifying the resulting merged javascript). The last step, as always, is a dest function call, defining the destination of the resulting file.

The Last Line

When defining the tasks we need, the last line creates one last task, that I’ve called ‘default’ which runs both of the other functions when called. This way, instead of calling the tasks separately, it actually completes the entire process in one fell swoop. The task is called ‘default’ because that’s the automatic function called by gulp.

The end result will be two new files - one minified CSS file, and one minified javascript file. Include these in your HTML head area, and you’re all set.

I hope that this article has helped make Gulp look appealing to anyone who was daunted by Grunt in the past. There are various articles on how to use gulp for other typical tasks (such as using it for SASS). As the syntax is (in my opinion) easier to read than Grunt, if you have any experience with JavaScript, it should prove easier to use for beginners. There are some who find task runners to be overly bloated for what it should do. However, the ease-of-use for some cases (especially for those starting out) should outweigh the trade-offs. For those wanting to use npm and reduce bloat, you can simply install the raw packages (such as stylus). To automate things, you can also create a make file or a script to execute the commands. I leave that as an exercise to the user. If you’re using a web framework, they generally have ways of executing function calls themselves.

If anyone has any questions, suggestions, or requests, feel free to email me at lswest34+fcm@gmail.com.