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:

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 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 , gulp serve , npm gulp , gulp less , npm save dev , gulp imagemin , gulp clean , gulp livereload , gulp command not found , gulp dest , gulp copy , npm watch , gulp build , gulp connect , npm sass , gulp if , gulp scss , gulp minify js , browserify gulp , gulp jshint , gulp pipe , npm install save dev , npm install dev gulped meaning , js uglify , gulp bower , gulp plugins , gulp definition , gulp start , compilation pipe , gulp changed , install gulp windows , gulp npm , gulp cli , gulp angular , gulp run , gulp version , gulp wiki , gulp file , define gulp , gulp path , run gulp , typescript gulp , gulp concat css , javascript pipe , sass gulp , install gulp ubuntu , what is gulp js , gulp command

Related Searches to Gulp Useful Plugins