Six Gulp Plugins Every Web Developer Should Be Using

Gulp PluginsI’m a big fan of the Gulp task runner. I can’t imagine doing any serious web development work without Gulp in the background doing all the jobs that used to take time away from what I really want to focus on — coding and design.

Over the past few months, I’ve tried out dozens of Gulp plugins. Some haven’t found a regular place in my development workflows. Some have a specific role according the project I am working on. And some have become so essential that I install them in every project.

If you have no idea what I’m talking about, check out our earlier articles on Gulp, including my brief introduction and a more detailed tutorial discussing how Gulp can be used to streamline performance optimization, in which I also talk about how to install the plugins we’re about to discuss.

Browser Sync

If you develop websites, you’ll be very familiar with the edit-refresh-edit-refresh cycle. When you make a change in your code, you have to refresh the browser to see the results. Browser Sync is a tool that automatically refreshes the page, and this plugin allows Gulp to trigger the refresh when it detects a change in your watched files.

Gulp-plumber

As I said, I’m a fan of Gulp, but one behavior that had me tearing my hair out was error handling. Every time I saved a file — or my text editor auto-saved — without having entered correct SASS, for example, Gulp would throw an error and exit. Everyone makes little mistakes while they code — forgetting the semicolon in CSS is my particular sin — and it’s no fun to restart the gulp every time a pugin catches one.

Gulp-plumber replaces the standard pipe method with one that doesn’t immediately exit the pipe on an error. Errors will be printed to the console, but the pipe will continue as normal once they’ve been fixed.

Gulp-autoprefixer

AutoPrefixer uses data from Can I Use to add browser prefixes to any styles that need them. If you use this plugin, you don’t have to worry about manually adding prefixes.

Gulp-uncss

Most mature web development projects have CSS styles that are unused. Even the most meticulous developer can lose track, and for large projects, unused styles can bloat the size of stylesheet considerably. UnCSS will remove all unused styles.

Gulp-concat

As the name suggests, gulp-concat takes a set of files and joins them together into one file. This is useful for CSS and JavaScript files — it’s good to have separate files for development, but the multiple HTTP requests the require in production is bad for performance.

Gulp-uglify

Another fairly straightforward plugin that helps with performance, gulp-uglify turns your beautiful JavaScript into an unreadable but significantly smaller tangle of text. Minification is a great performance optimization technique, and, coupled with gulp-concat and gzipping, will squeeze your assets down to the smallest possible size. Gulp-minify-css will do the same job on your CSS files.

If you’re new to Gulp, these six plugins are a great place to start, and if you’re an experienced Gulp user, feel free to share your picks in the comments below.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.

GET STARTED