10 Highly Useful Gulp.js Plugins For A Super Ninja Front-end Workflow

It is no secret that Gulp.js is one of the best task runners on the front-end block. Old man Grunt is still out and about, but it is only a matter of time before Gulp takes its place.

If you are new to Gulp or are not sure what plugins to use, this post highlights ten of the most useful plugins for streamlining your front-end development workflow like a nazi killing spy.

10. gulp-util

An official set of helper functions to use in your Gulp files. From functions that allow you to colour console output to logging and more. The logging functions alone can be helpful, the colouring functionality also helps you visually highlight different tasks and results as well.

9. gulp-uglify

A tried and tested plugin for minifying Javascript using UglifyJS2. This is one of those must have plugins to use in your Gulpfile (if you are working with Javascript that is).

8. gulp-concat

Minifying Javascript is one thing, but combining multiple files into one Javascript file, now that is a whole new level. Reduce network requests and speed up your application by concatenating. Use this in combination with gulp-sourcemaps and you have yourself minified and debuggable Javascript files.

7. gulp-sourcemaps

As Abraham Lincoln once profoundly said, “He who not uses source maps is either a fool or a coward, or both” – so honour his memory by automatically generating source maps for your minified Javascript files to debug them without having to use production versions. If you are not already using source maps, you should.

6. gulp-plumber

There is one annoying thing you will learn pretty quickly using Gulp, without using a proper error handler or plugin like Plumber, if something errors out, your build process stops. What Plumber does is catches errors and prevents the pipe from breaking. I always include this plugin in every variation of mu gulpfile.js.

5. gulp-minify-css

No web build process is complete without CSS magnification, right? Combine and minify your CSS files with a lot of different customisation options that make this plugin one of the must haves alongside Javascript minification.

4. gulp-iconfont

This genius plugin converts your SVG icons being used into a suite of icon fonts that work in Internet Explorer, Chrome, Firefox and more without lifting a finger. Icon fonts reduce network requests and page weight. If you have not used this plugin before, you are missing out.

3. gulp-browser-sync

A fully-featured Gulp plugin for using BrowserSync which gives you; synchronised browsing across multiple devices, a LiveReload server, CSS injection and more. This is a great alternative to other implementations of LiveReload because you get additional features. Change a file locally and instead of having to refresh, your browser automatically refreshes or injects the changes.

2. Autoprefixer

This is an essential must have in your Gulp arsenal. What Autoprefixer does is allows you to write CSS without vendor prefixes and then will scan your CSS and add them in according to whatever you have configured and Caniuse.com usage statistics. This saves you having to use CSS libraries and writing multiple lines for things like Flexbox, etc.

1. gulp-load-plugins

Because Gulp.js uses Node, you include all of your Gulp plugins by requiring them. If you are using all plugins listed here, that is 10 lines of includes, there has to be a better way, right? Meet Gulp Load Plugins.

What this brilliant plugin does is loads all of our plugins in the one reference line like so:

var $ = require('gulp-load-plugins')();

gulp.task('sometask', function() {
    return gulp.src('./**/*.js')
        .pipe($.somePlugin())
        .pipe(gulp.dest('./dest'));
});

All plugins by default are loaded camelCase, and to use them simply use whatever variable you included the “gulp-load-plugins” plugin under and you have just saved yourself a lot line of code.

Conclusion

There you have it, ten useful Gulp plugins which will streamline your front-end development workflow. If you have any suggestions, feel free to add them into the comments below.