Useful Gulp.js plugins

When working with Gulp.js your set up is only as good as the plugins that you use in your task runner. The choices you make when including plugins will effect your efficiency as a developer and help you to create an effective task running system.

My go-to Gulp plugins

When developing websites I have a core group of plugins that I like to incorporate to make my output more efficient. By ensuring that these are including in the projects that I work on I can ensure that I have a consistent foundation to my projects development. Below I have listed a number of plugins that I utilise in my tasks with a short description about each.

gulp-sass

As all the projects I work with include the usage of Sass this plugin is essential. It enables me to include Sass error handling in my workflow when watching my files with Gulp which helps me to catch any errors that I may have missed.

gulp-cssnano

Optimising my CSS output is key to me being an efficient front end developer. By including gulp-cssnano, which is a plugins that is part of the PostCSS ecosystem, I can ensure that I provide a minified copy of my CSS in my output.

gulp-autoprefixer

The burden of web specific prefixing within your CSS isn’t going anywhere soon but with the gulp-autoprefixer plugin you can specify your browser support thresholds and it will take care the duplication within your source code by adding the required browser prefixes during the process of producing my CSS files.

browser-sync

If you haven’t used this plugin yet I highly recommend you do. By incorporating this into my gulp task runner I am able to test projects on multiple devices via a specific IP address that is allocated upon running the task. The system enables you to run your projects parallel on each device with interaction being processed simultaneously which is a big plus when testing what you have produced.

There are many other great features that BrowserSync offers that are listed on their website that you can utilise within your setup including live reloading with css injection and a nifty UI interface that lets you throttle the connection speed when testing.

gulp-jshint

When it comes to JavaScript it is useful to know if an error occurs. With the incorporation of gulp-jshint I can be made aware of any issues straightaway.

gulp-concat

On some of the projects that I work on there are number of different JavaScript files that are utilised. To help ensure that my project only requires one JavaScript file request the gulp-concat plugin concatenates all of the JavaScript files into one file for me.

gulp-uglify

To coincide with the process of gulp-concat I also include the gulp-uglify plugin to provide me with a minified/optimised version of the concatenated files. This helps to ensure that my final output is optimised ready to be used in my project.

gulp-rename

When minifying files with gulp-cssnano and gulp-uglify I like to create a separate file for the minified versions. This enables me to reference the non-minified version should any issues arise that haven’t been picked up by my Gulp set-up. As part of the process I include a step that utilises this plugin after the gulp-cssnano and gulp-uglify steps that generates a file .min version.

gulp-imagemin

As images are part of nearly all web projects it is important to ensure that images you are loading into your website are optimised effectively. By utilising gulp-imagemin you can help to reduce the files sizes of your images with very little lose in quality.

gulp-notifier

When running tasks that can throw errors it is important that you are aware straight away if an issue arises, no one likes asking the question ‘why hasn’t my change taken effect’ only to switch to your terminal window and find a nice list of errors that occurred during compiling your Sass files.

With gulp-notifier you can set up your tasks to incorporate an error notification pop-up that lets you know whether your tasks have been success or not.

gulp-stats

If you like to know where the majority of your task runner spends its time I recommend including gulp-stats into your workflow. Its a nice little reporting tool that lets you know how long each task takes to run and can help you to refine your tasks where requires if something is running inefficiently.

New plugin releases, updates and depreciation

When working with plugins with Gulp it is important to keep an eye out for any new releases, updates and whether a plugin has been depreciated. By doing this you will keep yourself ahead by adopting new features, new tools and providing yourself with a better workflow.

Depreciation of plugins happens, whether it is that a new alternative has been developed or the developer no longer has the time to maintain it, it is important that you make amendments where required to find an alternative solution should an error arise.

Refine, refine, refine

I am always looking to improve upon my foundation of plugins to start a project and, as I’m mention above, new tools become available regularly so ensure you keep an eye out for them and test them before incorporating them into your workflow.

If you have any recommendations of plugins that you use feel free to let me know @jordan_simpson.