Google Choice: Gulp - Useful Plugins

Tuesday, February 21, 2017

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

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.

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.

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.

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.

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.

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.