Gulp - Useful Plugins


Gulp provides some useful plugins to work with HTML & CSS, JavaScript, Graphics and some other things as described in the following tables.

HTML & CSS Plugins

Sr.No. Plugin & Description
1 autoprefixer

It automatically includes prefixes to CSS properties.

2 gulp-browser-sync

It is used to watch all HTML and CSS files in the CSS directory and performs the live reload to the page in all browsers, whenever files are changed

3 gulp-useref

It is used to replace references to non-optimized scripts or stylesheets.

4 gulp-email-design

It creates HTML email templates which converts CSS styles to inline.

5 gulp-uncss

It optimizes CSS files and finds unused and duplicated styles.

6 gulp-csso

It is a CSS optimizer, which minimizes CSS files resulting in smaller file size.

7 gulp-htmlmin

It minimizes HTML files.

8 gulp-csscomb

It is used to make style formatter for CSS.

9 gulp-csslint

It specifies a CSS linter.

10 gulp-htmlhint

It specifies a HTML validator.

JavaScript Plugins

Sr.No. Plugin & Description
1 gulp-autopolyfiller

It is same like autoprefixer which includes necessary polyfills for JavaScript.

2 gulp-jsfmt

It is used for searching specific code snippets.

3 gulp-jscs

It is used to check JavaScript code style.

4 gulp-modernizr

It specifies what HTML, CSS and JavaScript features the user's browser has to offer.

5 gulp-express

It starts gulp express.js web server.

6 gulp-requirejs

It uses require.js to combine require.js AMD modules into one file.

7 gulp-plato

It generates complexity analysis reports.

8 gulp-complexity

It analyzes the complexity and maintainability of code.

9 fixmyjs

It fixes JSHint results.

10 gulp-jscpd

It is used as copy/paste detector for source code.

11 gulp-jsonlint

It is JSON validator.

12 gulp-uglify

It minifies the JavaScript files.

13 gulp-concat

It concatenates the CSS files.

Unit Tests Plugins

Sr.No. Plugin & Description
1 gulp-nodeunit

It runs node unit tests from Gulp.

2 gulp-jasmine

It is used to report the issues related to the output.

3 gulp-qunit

It provides basic console output for QUnit tests and uses PhantomJS node module and PhantomJS runner QUnit plugin.

4 gulp-mocha

It specifies the thin wrapper around Mocha and runs the Mocha tests.

5 gulp-karma

It has been deprecated in Gulp.

Graphics Plugins

Sr.No. Plugin & Description
1 gulpicon

It generates sprites from SVG and converts them to PNG.

2 gulp-iconfont

It is used with web fonts to create WOFF, EOT, TTF files from SVG.

3 gulp-imacss

It transforms image files into data URIs and places them into a single CSS file.

4 gulp-responsive

It generates responsive images for different devices

5 gulp-sharp

It is used to change and resize the orientation and background of the image.

6 gulp-svgstore

It combines SVG files into one with <symbol> elements.

7 gulp-imagemin & gulp-tinypng

It is used for compressing the images such as PNG, JPEG, GIF, SVG.

8 gulp-spritesmith

It is used for creating spritesheet from set of images and CSS variables.

Compilers Plugins

Sr.No. Plugin & Description
1 gulp-less

It provides LESS plugin for Gulp.

2 gulp-sass

It provides SASS plugin for Gulp.

3 gulp-compass

It provides compass plugin for Gulp.

4 gulp-stylus

It is used for keeping stylus in CSS.

5 gulp-coffee

It provides coffeescript plugin for Gulp.

6 gulp-handlebars

It provides handlebars plugin for Gulp.

7 gulp-jst

It provides underscore templates in JST.

8 gulp-react

It specifies Facebook React JSX templates into JavaScript.

9 gulp-nunjucks

It specifies Nunjucks templates in JST.

10 gulp-dustjs

It specifies Dust templates in JST.

11 gulp-angular-templatecache

It specifies AngularJS templates in the templateCache.

Other Plugins

The gulp-clean plugin removes files and folders and the gulp-copy plugin copies the files from source to new destination.

Sr.No. Plugin & Description
1 gulp-grunt

It runs the Grunt tasks from Gulp

2 gulp-watch

It watches the files whenever changes are made.

3 gulp-notify

It notifies the error message whenever a task fails.

4 gulp-git

It allows to use Git commands.

5 gulp-jsdoc

It creates JavaScript documentation for Gulp.

6 gulp-rev

It provides static asset revisioning to file names.

7 gulp-bump

It increases the versions in JSON package.

8 gulp-bower-files

It is used to inject bower packages.

9 gulp-removelogs

It removes console.log statements.

10 gulp-preprocess

It preprocesses HTML, JavaScript and other files based on context or environment configuration.

11 gulp-duration

It specifies the duration for Gulp tasks.

12 gulp-changed & gulp-newer

It runs the modified files and newer files.

13 gulp-connect

It is used to run a web server with LiveReload.

14 gulp-shell

It runs Shell commands.

15 gulp-ssh

It connects by using SSH and SFTP tasks.

16 gulp-zip

It compresses the files and folders.

17 gulp-clean & gulp-copy
18 gulp-filesize

It specifies the file size in human readable format.

19 gulp-util

It provides utilities for gulp plugins.