gulp - Gulp Useful Plugins - gulp sass - gulp tutorial - learn gulp

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:

const gulp = require('gulp');
const phpMinify = require('@aquafadas/gulp-php-minify');
 
gulp.task('minify:php', () => gulp.src('path/to/lib/**/*.php', {read: false})
  .pipe(phpMinify())
  .pipe(gulp.dest('path/to/out'))
);

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

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.

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?

HTML & CSS Plugins:

Browser Sync

Gulp-plumber

Gulp-autoprefixer

Gulp-uncss

Gulp-concat

Gulp-uglify

JavaScript Plugins

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:

Graphics Plugins:

Compilers Plugins:

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:

Usage

Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team

Related Searches to Gulp Useful Plugins

Wikitechy

Workshop

Join our Community

Other Languages