Gulp Common plug-in finishing (compression, compatibility, timestamp, optimization, hash, etc.) _ optimization

Gulp is the tool of building the code in the front-end development process, and it is the building weapon of the automation project.
She not only can optimize the website resources, but also in the development process many repetitive tasks can use the correct tool to complete automatically;
using her, we can not only happily write code, and greatly improve our efficiency.

1.gulp-clean
Delete files/folders

NPM Install Gulp-clean--save-dev

var gulp = require (' gulp ');
var clean = require (' Gulp-clean ');
Gulp.task (' Clean ', function () {return
    gulp.src ('./public/dist ', {read:false}). Pipe (Clean ());

2.gulp-concat
Merge JS file, you can merge multiple JS file as a file, reduce server requests.

NPM Install Gulp-concat--save-dev

var concat = require (' Gulp-concat ');
Gulp.task (' Scripts ', function () {return
    gulp.src (' src/js/*.js ')
    . Pipe (concat (' all.js '))
    . PIPE ( Gulp.dest (' dist/');
});

3.gulp-uglify
To the JS file compression, some people call this to "demonize", it is really ugly

NPM Install gulp-uglify--save-dev

var uglify = require (' gulp-uglify ');
Gulp.task (' uglify ', function () {
    gulp.src (' src/js/*.js ')
    . Pipe (Uglify ())
    . Pipe (Gulp.dest (' dist/'));
};

4.css Merge Plugin Gulp-concat-css
CSS Merge Plug-ins, merge multiple CSS files as a file, reduce the number of Web page requests to the server, provide Web page response speed.

NPM Install Gulp-concat-css--save-dev

var concatcss = require (' gulp-concat-css ');
Gulp.task (' Concatcss ', function () {return
    gulp.src (' src/**/*.css ')
    . Pipe (Concatcss ("Index.css"))
    . Pipe (Gulp.dest (' dist/'));

5.css Compression Plugin Gulp-minify-css
Compress CSS Files

NPM Install Gulp-minify-css--save-dev

var minifycss = require (' gulp-minify-css ');
Gulp.task (' Minifycss ', function () {return
    gulp.src (' src/css/*.css ')
    . Pipe (Minifycss ())
    . PIPE ( Gulp.dest (' dist/');
});

6.gulp-autoprefixer
Add a private prefix to your browser so you don't have to worry about writing a compatible prefix for your browser.

NPM Install   gulp-autoprefixer  --save-dev

var autoprefixer= require (' gulp-autoprefixer ');
Gulp.task (' Autoprefixer ', function () {
    gulp.src (' src/css/*.css ')
        . Pipe (Autoprefixer ({
            cascade:true, 
            remove:true 
        }))
        . Pipe (Gulp.dest (' dist/css '));

7.gulp-htmlmin

HTML file Compression Plugin

NPM Install Gulp-htmlmin--save-dev

var htmlmin = require (' gulp-htmlmin ');
Gulp.task (' Htmlmin ', function () {
    gulp.src (' src/*.html ')
    . Pipe (Htmlmin ({collapsewhitespace:true}))
    . Pipe (Gulp.dest (' dist/');
});

8. Gulp-imagemin
Picture Compression plugin.
NPM Install Gulp-imagemin–save-dev

var imagemin = require (' gulp-imagemin ');
Gulp.task (' Imagemin ', function () {
    gulp.src (' src/images/* ')
    . Pipe (Imagemin ()). Pipe (Gulp.dest (
    ' Dist/images '));

9.gulp-rename
Modify the name of the file.

NPM Install Gulp-rename--save-dev

var rename = require (' rename ');
Gulp.task (' Rename ', function () {
    gulp.src (' src/css/base.css ')
    . Pipe (Rename (' Main.css '))
    . PIPE ( Gulp.dest (' src/css/');
});

10.gulp-jshint
Check for errors in JavaScript code

NPM Install Gulp-jshint--save-dev

var jshint = require (' Gulp-jshint ');
Gulp.task (' Jshint ', function () {
    gulp.src (' src/js/*.js ')
    . Pipe (Jshint ())
    . Pipe (Jshint.reporter ());

11.gulp-csslint
Check CSS for syntax errors

NPM Install Gulp-csslint--save-dev

var csslint = require (' Gulp-csslint ');
Gulp.task (' Csslint ', function () {
    gulp.src (' src/css/*.css ')
    . Pipe (Csslint ())
    . PIPE ( Csslint.reporter ());

12.gulp-csscomb
Format CSS code, beautify CSS code, easier to read.

NPM Install Gulp-csscomb--save-dev

var Csscomb = require (' Gulp-csscomb ');
Gulp.task (' Csscomb ', function () {
    gulp.src (' src/css/main.css ')
    . Pipe (Csscomb ()). Pipe (Gulp.dest (
    ' Dist/css '));

13.gulp-rev-collector
HTML PHP JSON Path substitution

NPM Install Gulp-rev-collector--save-dev

var revcollector = require (' Gulp-rev-collector ');  
Gulp.task (' Revcollector ', function () {
    gulp.src ('./public/dist/rev/*.json ', './resources/views/web/**/*.php ') ]   
        . Pipe (Revcollector ({
            replacereved:true
        }))                                  
        . Pipe (Gulp.dest ('./resources/views/web/')); 

14.gulp-rev
Add MD5 time stamp to file

NPM Install Gulp-rev--save-dev

 var rev. = require (' Gulp-rev '); Gulp.task (' rev ', function () {GULP.SRC (['./public/js/*.js ', './public/js/common/*.js ']). Pipe (Jshint ()). PIPE (UGL Ify ()). Pipe (rev ()). Pipe (Gulp.dest ('./public/dist/js ')). Pipe (Rev.manifest ()). Pipe (Gulp.dest ('./public/d Ist/dev ')});