gulp - Gulp Useful Plugins - gulp sass - gulp tutorial - learn gulp
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
What are all the 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:
Browser Sync
- If you develop websites, you’ll be very familiar with the edit-refresh-edit-refresh cycle. When you make a change in your code, you have to refresh the browser to see the results.
- Browser Sync is a tool that automatically refreshes the page, and this plugin allows Gulp to trigger the refresh when it detects a change in your watched files.
Gulp-plumber
- Gulp-plumber replaces the standard pipe method with one that doesn’t immediately exit the pipe on an error. Errors will be printed to the console, but the pipe will continue as normal once they’ve been fixed.
Gulp-autoprefixer
- AutoPrefixer uses data from Can I Use to add browser prefixes to any styles that need them. If you use this plugin, you don’t have to worry about manually adding prefixes.
Gulp-uncss
- Most mature web development projects have CSS styles that are unused. Even the most meticulous developer can lose track, and for large projects, unused styles can bloat the size of stylesheet considerably. UnCSS will remove all unused styles.
Gulp-concat
- As the name suggests, gulp-concat takes a set of files and joins them together into one file.
- This is useful for CSS and JavaScript files - it’s good to have separate files for development, but the multiple HTTP requests the require in production is bad for performance.
Gulp-uglify
- Another fairly straightforward plugin that helps with performance, gulp-uglify turns your beautiful JavaScript into an unreadable but significantly smaller tangle of text.
- Minification is a great performance optimization technique, and, coupled with gulp-concat and gzipping, will squeeze your assets down to the smallest possible size.
- Gulp-minify-css will do the same job on your CSS files.
JavaScript 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. |
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
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. |
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
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
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. |
Usage
The plugin takes a list of PHP scripts as input, and removes the comments and whitespace in these files by applying the php_strip_whitespace()
function on their contents:
The plugin only needs the file paths, so you should specify the read option to false when providing the file list, and you should not have any other plugin before it.