Gulp Common Plugin Practice

The previous article introduced some gulp some basic operations, but in peacetime development, those basic operations are unable to meet our needs, many of our features need to gulp plug-ins to achieve. Come in and write down the gulp plugin you normally use. You can go to NPM to search for the following plugins

First of all, JS and CSS related plugins
Gulp-cssmin compressed CSS files, gulp-less processing less files, other preprocessing also has a corresponding plug-in, gulp-uglify compression js file
The following shows the use of plugins

var gulp = require (' gulp ');
var cssmin = require (' gulp-cssmin ');

Gulp.task (' Cssmin ', function () {
    gulp.src (' a/a.css ').
        pipe (Cssmin ())
        . Pipe (Gulp.dest (' B '))
})

This code is very simple is to create a cssmin task, the file entry is A.css Exit B folder, the middle called the Cssmin method,
The result of executing the Gulp cssmin is that a a.css is automatically generated under the B folder and the CSS inside is compressed

A/a.css under the
. Text {
    text-align:center;
    font-size:16px;
    font-weight:700;
}
B/a.css
. text{text-align:center;font-size:16px;font-weight:700}

And then look at the JS compression

var gulp = require (' gulp ');
var uglify =require (' gulp-uglify ');

Gulp.task (' Jsmin ', function () {
    gulp.src (' a/a.js ').
        pipe (Uglify ())
        . Pipe (Gulp.dest (' B '))
})

The code doesn't go into detail, it's easy to see the results.

function Person (name,age) {
    this.name = name;
    This.age = age;
}
Compressed function person
(n,e) {this.name=n,this.age=e}

Of course we can use ES6 syntax, then we need to introduce some Babel gulp plugins

NPM install--save-dev Gulp-babel babel-preset-[env] Babel-core

To install three notes, one is Gulp's Babel plug-in and one is the environment [ENV] option has a lot of addresses attached below, we use es2015 because we're going to translate into 2015 The last one is the core package of Babel itself

Environment Address https://babeljs.io/docs/plugins/#presets

var Babel = require (' Gulp-babel ');

Gulp.task (' Babel ', () =
    gulp.src (' a/a.js ')
        . Pipe (Babel ({
            presets: [' es2015 ']//here is our download environment
        }))
        . Pipe (Gulp.dest (' B ')))
;

Take a look at the results, here's the ES6 class syntax

Class Person {
    Constructor (name,age) {
        this.name = name;
        This.age = age;
    }
}
After compiling
"use strict";

function _classcallcheck (instance, Constructor) {if (!) ( Instance instanceof Constructor) {throw new TypeError ("Cannot call a class as a function");}}

var person = function person (name, age) {
    _classcallcheck (this, person);

    this.name = name;
    This.age = age;
};

The next step is to introduce some bits and pieces of common plug-ins
Livereload (Browser auto refresh) feature plug-ins gulp-livereload and Gulp-connect, described here under Gulp-connect

var gulp = require (' gulp ');
var connect = require (' gulp-connect ')

gulp.task (' Connect ', function () {
  Connect.server ({
    root: ' A '),
    livereload:true,
    port:1234
  });
  Gulp.watch ([' a/*.html '], [' HTML ']);
}); 


Gulp.task (' HTML ', function () {
  gulp.src (' a/a.html ')
    . Pipe (Gulp.dest (' B '))
    . Pipe (Connect.reload ()) ;
});

Image compression Plug-in gulp-imagemin This is very simple, don't write code.
Put it on the web, and you can see for yourself https://www.npmjs.com/package/gulp-imagemin

File Merge plugin Gulp-concat Https://www.npmjs.com/package/gulp-concat

Gulp.task (' Concat ', function () {
  return gulp.src (' A/*.js ')
    . Pipe (concat (' all.js '))
    . Pipe (Gulp.dest (' B '));

The rest is a case in point.
Gulp-plumber Handling Gulp errors, Https://www.npmjs.com/package/gulp-plumber
Gulp-clean used to clear the Https://www.npmjs.com/package/gulp-clean
Gulp-rename used to rename Https://www.npmjs.com/package/gulp-rename
Gulp-if can write some logic in gulp https://www.npmjs.com/package/gulp-if

Write these first, and then add some of the other used