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
| 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 |
The gulp-clean plugin removes files and folders and the gulp-copy plugin copies the files from source to new destination.
| 18 |
gulp-filesize
It specifies the file size in human readable format.
|
| 19 |
gulp-util
It provides utilities for gulp plugins.
|
