I’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.
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.
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.
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.
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.