Gulp Useful Plugins - Gulp

What is Gulp - Useful Plugins?

To work with HTML & CSS, JavaScript, Graphics and some other things, Gulp provides some useful plugins 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 is used to remove 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.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Gulp Topics