Introduction and usage of plug-ins commonly used when using gulp

plug-ins available for use: compiling

Gulp-sass-Compiling the sass into CSS via Libsass

Gulp-ruby-sass-compiling sass into CSS via Ruby Sass

Gulp-compass-compiled into CSS via Ruby sass and Compasssass

Gulp-less-less compiled into CSS.

Gulp-stylus-stylus compiled into CSS.

Gulp-postcss-pipe CSS via POSTCSS processors with a single parse.

Gulp-coffee-coffeescript compiled into JavaScript.

Gulp-typescript-typescript compiled into JavaScript.

Gulp-react-facebook react JSX template compiled into JavaScript.

Webpack-stream-integrates webpack with gulp.

Gulp-babel-es6 compiled into ES5 through Babel.

Gulp-traceur-es6 compiled into ES5 through Traceur.

Gulp-regenerator-es6 compiled into ES5 through regenerator.

Gulp-myth-myth-a Polyfill for future versions of the CSS spec. Merging

Gulp-concat-merge files. Compression

Gulp-clean-css-Compress CSS through CLEAN-CSS.

Gulp-csso-Compress CSS through Csso.

Gulp-uglify-compresses JavaScript through UglifyJS2.

Gulp-htmlmin-Compress HTML via Html-minifier.

gulp-minify-html-Compressed HTML via Minimize ( the package has been deprecated, it is recommended to use Gulp-htmlmin)

Gulp-imagemin-Compresses PNG, JPEG, GIF and SVG pictures via Imagemin.

Gulp-svgmin- optimized by Gulp compression SVG file

GULP-UNCSS-Remove unused CSS selectors through UNCSS.

Gulp-css-base64-Converts all resources in the CSS file (with URL () declarations) into the URI string of the base64-encoded data

Gulp-svg2png-Convert SVGs to PNGs

Gulp-responsive-Create pictures of different sizes

Gulp-svgstore-merge SVG files into one through element

Gulp-iconfont-Create an icon fonts resource injection via SVG icons

Gulp-useref-Parses a script or style tag inside a special tag in an HTML file, merges it into a script or CSS file, and replaces it.

Gulp-inject-Inserts the specified CSS or JS file into the specified flag in the HTML as a label.

WIREDEP-The Bower dependency is automatically injected into the HTML file. Templates

Gulp-angular-templatecache-Contact and register the Angularjs template in $templatecache

Gulp-jade-jade converted to HTML.

The Gulp-handlebars-handlebars template is converted into JavaScript.

The Gulp-hb-handlebars template is converted into HTML.

The gulp-nunjucks-nunjucks template is converted into JavaScript.

The gulp-dustjs-dust template is converted into JavaScript.

The Gulp-riot-riot template is converted into JavaScript.

Gulp-markdown-markdown→html.

The Gulp-template-lodash template is converted into JavaScript.

The Gulp-swig-swig template is converted into HTML.

Gulp-remark-gulp plugin for [remark] Gulp plugin (https://github.com/wooorm/remark) handles markdown code validation via plug-ins

Gulp-csslint-Automatically validates the CSS via Csslint.

Gulp-htmlhint-verifies HTML through Htmlhint.

Gulp-jshint-discovers errors and potential problems through jshint.

Gulp-jscs-check JavaScript code style with Jscs.

Gulp-coffeelint-A check that ensures a uniform Coffeescript code style.

Gulp-tslint-gulp the typescript code check plugin.

Gulp-eslint-ecmascript/javascript code Validation.

GULP-W3CJS-Verify HTML through W3CJS.

Gulp-lesshint-Verify less by Lesshint. Real-time loading

Browser-sync-ensures that multiple browsers or device pages are displayed synchronously (recipes).

Gulp-livereload-gulp's real-time loading plugin. Cache

Gulp-changed-only let the changed files pass.

Gulp-cached-A simple file memory cache.

Gulp-remember-remembers and recycles the passed files.

Gulp-newer-Just let the new source pass. Flow Control

Merge-stream-merges multiple streams into an inserted stream.

Streamqueue-gradually enter the stream for the queue.

Run-sequence-run some dependent gulptask as required.

Gulp-if-run task by condition. Log

GULP-NOTIFY-GULP notification plug-in.

Gulp-size-Displays the size of your item.

Gulp-debug-by debugging the file stream to see those files passing through your Gulp pipeline. Test

Gulp-mocha-Run the Mocha test case.

Gulp-jasmine-Run the Jasmine 2 test case in node. js.

Gulp-protractor-Wraps the gulp for the protractor test case.

Gulp-coverage-run an independent report for node. JS covering relative to the running test.

Gulp-karma-run Karma test cases through gulp.

Gulp-ava-runs the AVA test case through gulp. Other plugins

Gulp-util-Contains a series of useful plugins.

Gulp-plumber-prevents errors caused by pipe interruption prevent pipe breaking caused by errors.

Gulp-load-plugins-Automatically load the Gulp plugin.

Main-bower-files-Automatically gets the files for the Bower Library at build time.

Autoprefixer-Parses the CSS and adds a browser compatibility prefix according to the rules.

Gulp-sourcemaps-Provides source map support.

Gulp-replace-gulp a string to replace the plugin.

Gulp-rename-Easily rename files.

Gulp-rev-Adds a hash value after the static file name, such as: Unicorn.css→unicorn-d41d8cd98f.css.

Del-delete files/folders using Globs.

Gulp-exec-run a shell command.

Gulp-strip-debug-Removes the Console,alert,debugger declaration from the JavaScript code.

Gulp-cssimport-Parse the CSS file, locate the imports, and replace the connection file with the Imort declaration.

Gulp-inline-css-place CSS properties in HTML into the Style tab.

Gulp-gh-pages-Publish content to Gihub page.

Gulp-ng-annotate-Add angular dependency injection via ng-annotate.

Gulp-bump-Bump any Semvar JSON version via gulp.

Gulp-file-include-through the gulp include file.

Gulp-zip-Compress the file in zip format.

Gulp-git-run the git command through gulp.

Gulp-filter-Filter files using globbing.

Gulp-preprocess-pre-processing files based on custom content or environment configuration. Common plug-in usage description: 1. Gulp: Test, check, merge, compress, format, deploy, monitor, optimize Web page performance.

Let's start by throwing a question: why do we use Gulp. First ask yourself a question: usually write CSS with sass/less, with Jade write/html code, then these files of testing, inspection, merging, compression, formatting, deployment, monitoring . How it should be done. To compress a merge, you can reduce multiple Css,js file requests, optimize Web page performance, and whether such work should have a good solution. -The answer is Gulp .

to install using NPM:

NPM Install GULP-G  //Global Installation Gulp
npm Install gulp--save  //Local Installation Gulp

How to use:

Gulp has 4 properties, namely Src,dest,watch,task:

 Gulp.task (name[, Deps], FN)//defines a task that is implemented using Orchestrator. Name: Names of tasks, if you need to run some of your tasks on the command line, do not use spaces in the name. Deps: Type: Array, which contains a list of tasks that are completed before your current task is run.

 fn: This function defines some of the actions that the task will perform. GULP.SRC (globs[, Options])//output (emits) conforms to the provided matching pattern (glob) or array of matching patterns (array of globs) file, globs type: String or array Note: GULP.SRC
('./src/css/*.css ') has a second parameter base, you can specify the underlying path, and if not set, the default base path is * before the path. Base: './src/css ' If set gulp.src ('./src/css/*.css ', {base: './'}) then base is './' Gulp.dest ('./dist/css ') The parameter passed in is the base path base : './dist/css ' to give a chestnut to explain what is replacing Gulp.src ('./src/css/*.css '). pipe (). Pipe (Gulp.dest ('./dist/css ')); then the final path of the final file processing is./ Dist/css/*.css if it is gulp.src ('./src/css/*.css ', {base: './'}). pipe (). Pipe (Gulp.dest ('./dist/css ')); then the final path to the final file processing is ./dist/css/src/css/*.css gulp.dest (path[, Options])//Can be entered by the pipe, and will write files. and re-export (emits) all the data, so you can pipe it to multiple folders. If a folder does not exist, it will be created automatically. Path type: String or Function gulp.watch (glob[, opts], tasks)//monitor the file, and can do something when the file changes. Glob: Type: String or array,tasks: type: Array 

2. Gulp-sass: Compile the sass into CSS via Libsass

to install using NPM:

NPM Install Gulp-sass--save-dev

How to use:

1. Compile the Scss type file in the Sass folder as a CSS file:

' Use strict ';
var gulp = require (' gulp ');//Introduce gulp
var sass = require (' Gulp-sass ');//Introduce Gulp-sass
gulp.task (' sass ', function ( {   //Create SASS Task Name
  return gulp.src ('./sass/**/*.scss ')  //Read all SCSS type files in the "./sass/**/" directory
    . Pipe (Sass (). On (' Error ', sass.logerror))//Call the Sass method to compile the CSS file and print the error log, the sass () method is used to convert sass to CSS
    . Pipe (Gulp.dest ('./css ')); Place the resulting CSS file in the "./css" folder
});
Gulp.task (' Sass:watch ', function () {  //listen for changes in sass file
  gulp.watch ('./sass/**/*.scss ', [' sass ']);// After the SASS task is executed, listen for all scss type files under/sass/**/
});

2. How to translate the synchronous compilation:

' Use strict ';
var gulp = require (' gulp ');
var sass = require (' Gulp-sass ');
Gulp.task (' sass ', function () {
  return gulp.src ('./sass/**/*.scss ')
    . Pipe (Sass.sync (). On (' Error ', SASS.LOGERROR)//Call the Sass.sync method to compile the CSS file synchronously and print the error log
    . PIPE (Gulp.dest ('./css '));
});
Gulp.task (' Sass:watch ', function () {//Listen for changes in sass file
  gulp.watch ('./sass/**/*.scss ', [' sass ']);
});

3, gulp-less:less compiled into CSS

Using the Gulp-less plug-in to compile less files into CSS, when there is less file changes to automatically compile less, and to ensure that less syntax error or exception when the normal operation and prompt error message.

to install using NPM:

NPM Install gulp-less--save-dev

How to use:

1. Compile less-type files as CSS files:

var gulp=require (' Gulp '),//introduced Gulp
var less=require (' gulp-less ');//introduced gulp-less
gulp.task (' testless ', function () {  //Create testless Task Name
    gulp.src (' src/less/index.less ')//Read all index.less type files under "src/less/" Directory
        . Pipe (less ())  //Call less () to convert the less file to a CSS file
        . Pipe (Gulp.dest (' src/css '));////Place the resulting CSS file in the "Src/css" folder
}) ;

2. Compile multiple less-type files:

var gulp=require (' Gulp '),
var less=require (' gulp-less ');
Gulp.task (' Testlesslist ', function () {
    gulp.src ([' src/index.less ', ' src/less/detail.less '])//Multiple files are passed in as an array
        . Pipe (Less ())
        . Pipe (Gulp.dest (' src/css '));//will generate INDEX.CSS in Src/css and Detail.css
});

4, Gulp-stylus:stylus compiled into CSS

to install using NPM:

NPM Install--save-dev Gulp-stylus

How to use:

1. Basic wording:

var gulp = require (' gulp ');//Introduce gulp
var stylus = require (' Gulp-stylus ');//Introduce Gulp-stylus
gulp.task (' One ', function () {//Create one task
  return gulp.src ('./css/one.styl ')//read "./css/" folder under One.styl file
    . Pipe (Stylus ())// Call the stylus method to convert
    to CSS. Pipe (Gulp.dest ('./css/build '));//css file is placed in the "./css/build" Directory
});

2.gulp-stylus compression-generated CSS:

Gulp.task (' Compress ', function () {
  return gulp.src ('./css/compressed.styl ')
    . Pipe (Stylus ({
      compress): True//Require compression
    })
    . Pipe (Gulp.dest ('./css/build '));
});

5, Gulp-clean-css: Compile CSS After compression, generally to compress, with gulp-clean-css compression CSS

Use Gulp-clean-css to compress the CSS file, reduce the file size, and add a version number to the reference URL to avoid caching. (Previous gulp-minify-css with the same function have been discarded)

to install using NPM:

NPM Install Gulp-clean-css--save-dev

How to use:

1. Basic wording:

var gulp = require (' Gulp '),//introduced gulp
var cssmin = require (' gulp-clean-css ');//introduced gulp-clean-css
gulp.task (' Testcssmin ', function () {//Create Testcssmin Task
    gulp.src (' src/css/*.css ')//Read all CSS files under "src/css/" folder
        . Pipe ( CLEANCSS ())//Call the Cleancss method
        to compress the CSS. Pipe (gulp.dest (' dist/css '));//compress the CSS file into the "Dist/css" Directory
});

2.cssmin methods more parameters are used:

var gulp = require (' Gulp '),
    cssmin = require (' gulp-clean-css ');
Gulp.task (' Testcssmin ', function () {
    gulp.src (' src/css/*.css ')
        . Pipe (Cleancss ({
            advanced:false,// Type: Boolean default: True [whether to turn on advanced optimizations (merge selectors, etc.)]
            compatibility: ' IE7 ',//reserved IE7 and the following compatible wording types: String default: ' or ' * ' [Enable compatibility mode; ' IE7 ': IE7 compatibility mode, ' IE8 ': IE8 compatibility Mode, ' * ': ie9+ compatibility mode]
            keepbreaks:true,//type: Boolean default: False [Leave newline]
            Keepspecialcomments: ' * '//Keep all special prefixes when you use Autoprefixer to generate the browser prefix, if you do not add this parameter, it is possible to delete your partial prefix
        })
        . Pipe (Gulp.dest ( ' Dist/css ');
});

6, Gulp-csso: Compression CSS through Csso

to install using NPM:

NPM Install Gulp-csso--save-dev

How to use:

1. Basic wording:

var gulp = require (' gulp ');//Introduce gulp
var Csso = require (' Gulp-csso ');//Introduce Gulp-csso

gulp.task (' Default ', function () {//Create default task
    return Gulp.src ('./main.css ')//read "./main.css" File
        . Pipe (Csso ())//Call Csso method to compress CSS
        . Pipe (Gulp.dest ('./out '));//The compressed CSS file is placed in the "./out" directory
});

7. Gulp-coffee:coffeescript compiled into JavaScript

to install using NPM:

NPM Install--save-dev Gulp-coffee

How to use:

1. Basic wording:

var gulp = require (' gulp '); Introduce gulp
var coffee = require (' Gulp-coffee ');//Introduce Gulp-coffee
gulp.task (' Coffee ', function () {//Create coffee task
  gulp.src ('./src/*.coffee ')//Read all the coffee files under the "./src" folder
    . Pipe (coffee ())//Call the coffee method to convert to JS
    . PIPE ( Gulp.dest ('./public/'));//js file is placed in the "./public" Directory
});

8. Gulp-typescript:typescript compiled into JavaScript

to install using NPM:

NPM Install--global gulp-cli
npm Install gulp
npm install Gulp-typescript typescript

How to use:

1. Basic wording:

var gulp = require (' gulp ');//Introduce gulp
var ts = require (' Gulp-typescript ');//Introduce Gulp-typescript
gulp.task (' Default ', function () {//Create default task
    return gulp.src (' src/**/*.ts ')//Read all TS files under "src/**" folder
        . Pipe (TS ({
            Noimplicitany:true, 
            outFile: ' output.js '//output file name ' Output.js '
        })
        . Pipe (Gulp.dest (' built/local '));// JS file into the "built/local" Directory
});

9, Gulp-uglify: Through UglifyJS2 compression JavaScript (General JS are compressed)

Use gulp-uglify to compress JavaScript files and reduce file size.

to install using NPM:

NPM Install--save-dev gulp-uglify

How to use:

1. Basic wording:

var gulp=require (' Gulp '),  //introduced Gulp
var uglify=require (' gulp-uglify ');  Introduce gulp-uglify
gulp.task (' Jsmin ', function () {  //Create Jsmin Task
    gulp.src (' src/js/index.js ')  //read "src /js/index.js "File
        . Pipe (Uglify ())  //Call uglify compression js file
        . Pipe (Gulp.dest (' Dist/js '));  The compressed file is placed under the "Dist/js" folder
});

2. Compress multiple JS files

var gulp=require (' Gulp '),  
var uglify=require (' gulp-uglify ');  
Gulp.task (' Jsmin ', function () {  
    gulp.src ([' Src/js/index.js ', ' src/js/detail.js '])///Multiple files are passed in as an array  
        . PIPE ( Uglify ())  
        . Pipe (Gulp.dest (' Dist/js ');  
});  

3. Use with parameters

var gulp=require (' Gulp '),  
    uglify=require (' gulp-uglify ');  
Gulp.task (' Jsmin ', function () {  
    //compress all JS files in Src/js directory//  
    except Test1.js and test2.js (* * 0 or more subfolders matching SRC/JS)  
    GULP.SRC ([' Src/js/*.js ', '!src/js/**/{test1,test2}.js '])  
        . Pipe (uglify ({  
            mangle:true,//type: Boolean default: True Whether to modify the variable name  
            compress:true,//type: Boolean default: True whether to fully compress  
            preservecomments: ' All '//Keep all Comments  
        })  
        . PIPE ( Gulp.dest (' Dist/js '));  

10, Gulp-babel:es6 compiled into ES5 through Babel

to install using NPM:

NPM Install--save-dev gulp-babel @babel/core @babel/preset-env

How to use:

1. Basic wording:

Const GULP = require (' gulp ');
Const BABEL = require (' Gulp-babel ');

Gulp.task (' Default ', () =
    gulp.src (' src/app.js ')//read "src/app.js" App.js file
        . Pipe (Babel ({
            presets: [ ' @babel/env ']//presets field to set transcoding rules
        })
        . Pipe (Gulp.dest (' dist '))//js files are placed in the "dist" directory
);

11, Gulp-concat: Merge files, used to reduce network requests.

to install using NPM:

NPM Install--save-dev Gulp-concat

How to use:

1. Merge all files of this type under a folder:

var gulp = require (' gulp ');//reference Gulp
var concat = require (' Gulp-concat ');//introduce Gulp-concat plug-in
gulp.task (' Scripts ', function () {//Create a task
  return gulp.src ('./lib/*.js ') named "Scripts"//  Read all JS files under the Lib folder
    . Pipe ( Concat (' all.js '))   //Merge all the read JS files into the all.js file
    . Pipe (Gulp.dest ('./dist/'));  Place the output all.js file under the Dist folder, which is "./dist/all.js"
});

2. How to merge specific files:

var concat = require (' Gulp-concat ');
Gulp.task (' Scripts ', function () {
  return gulp.src (['./lib/file3.js ', './lib/file1.js ', './lib/file2.js '])// Read multiple specific file merges
    . Pipe (concat (' all.js '))
    . Pipe (Gulp.dest ('./dist/'));
});

12, Gulp-replace:gulp a string replacement plug-in

to install using NPM:

NPM Install--save-dev Gulp-replace

How to use:

1. Basic wording:

var gulp = require (' gulp ');//reference gulp
var replace = require (' gulp-replace ');//introduce gulp-replace plug-in
gulp.task (' Templates ', function () {
  gulp.src ([' file.txt '])//read file.txt file
    . Pipe (replace (' Bar ', ' foo '))//replace Bar with Foo
    . Pipe (Gulp.dest (' build/'));//replace file.txt content and place it in the "build/" folder
});

13, Gulp-htmlmin: Compressed HTML through Html-minifier

Using Gulp-htmlmin compressed HTML, you can compress the page JavaScript, CSS, remove page spaces, comments, delete extra attributes and other operations.

to install using NPM: