• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

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

Front End Development · November 12, 2014

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.

Dwayne

6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
piku
piku
8 years ago

Nice round-up. Would be nice if you provided a gist of a gulpfile.js containing all of these as a starter =)

0
Alex
Alex
7 years ago

Nice well done!

p.s What piku said ^_^

0
Thibault Jan Beyer
Thibault Jan Beyer
7 years ago

I like your article, it’s a really nice collection, but for accessibility reasons (and many other) it is a better practice to use SVG Sprites. You can use “gulp-svg-sprite” for instance.

See https://css-tricks.com/icon-fonts-vs-svg/ for more info

1
Larry D'Almeida
Larry D'Almeida
6 years ago

Just tried Browser Sync for the first time. Fell in love. Thank you! Thank you! Thank you!

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz