Front-End Automation Gulp Tools Common Plug-ins

The NPM init command Initializes a new Gulpfile.js file in the current folder after initializing the current folder. All the action flows under the current directory are defined in the Gulpfile.js file.
Gulp Automation gulp-uglify (JS compression)

Gulp-uglify Installation:

NPM Install--save-dev gulp-uglify

Gulp-uglify is used to compress JS files, using the Uglify engine.

var gulp = require (' gulp ');  Load Gulp
var uglify = require (' gulp-uglify ');  Load JS compression

//define a task Compass
gulp.task (' Compass ', function () {
    gulp.src ([' Js/*.js ', '!js/*.min.js '])  Gets the file, while filtering out the. min.js file
        . Pipe (Uglify ())
        . Pipe (Gulp.dest (' javascript/'));  Output file
});

Little tricks, second argument '. Js/*.min.js ' is used to filter out the suffix to min.js. An exclamation point is an exclusion mode. gulp-minify-css (CSS compression)

GULP-MINIFY-CSS Installation:

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

You can use it to compress CSS files

var gulp = require (' gulp ');
var minify = require (' gulp-minify-css ');

Gulp.task (' Cssmini ', function () {
    gulp.src ([' Css/*.css ', '!css/*.min.css '])  //CSS to compress
        . Pipe (Minify ())
        . Pipe (Gulp.dest (' buildcss/');
});

gulp-minify-html (HTML compression)

Gulp-minify-html Installation:

NPM Install--save-dev gulp-minify-html

You can use it to compress HTML files.

var gulp = require (' gulp ');
var Htmlmini = require (' gulp-minify-html ');

Gulp.task (' Htmlmini ', function () {
    gulp.src (' *.html ')
        . Pipe (Htmlmini ()). Pipe (Gulp.dest (
        ' Minihtml '))

gulp-jshint (JS code check)

Gulp-jshint Installation:

NPM Install--save-dev Gulp-jshint

Code that can be used to check JS

var gulp = require (' gulp ');
var jshint = require ("Gulp-jshint");

Gulp.task (' JSLint ', function () {
    gulp.src (' js/*.js ')
    . Pipe (Jshint ())
    . Pipe (Jshint.reporter ()); Output check result
});

gulp-concat (file merge)

Gulp-concat Installation:

NPM Install--save-dev Gulp-concat

Merge CSS and JS files to reduce HTTP requests.

var gulp = require (' gulp ');
var concat = require ("Gulp-concat");

Gulp.task (' Concat ', function () {
    gulp.src (' js/*.js ')  //file to be merged
    . PIPE (concat (' all.js '))  // Merge and match the JS file to the name "All.js"
    . Pipe (Gulp.dest (' Dist/js '));

gulp-less (compiled less)

Gulp-less Installation:

NPM Install--save-dev gulp-less

Convert the less file to CSS.

var gulp = require (' Gulp '),
    less = require ("gulp-less");

Gulp.task (' compile-less ', function () {
    gulp.src (' less/*.less ')
    . Pipe (Less ())
    . Pipe (Gulp.dest (' dist/ CSS ');
});

Gulp-sass (compiled sass)

Gulp-sass Installation:

NPM Install--save-dev Gulp-sass

Converts the Scss file to a sass file.

var gulp = require (' Gulp '),
    sass = require ("Gulp-sass");

Gulp.task (' Compile-sass ', function () {
    gulp.src (' Sass/*.sass ')
    . Pipe (Sass ())
    . Pipe (Gulp.dest (' Dist /css '));

gulp-imagemin (compress picture)

Gulp-imagemin Installation:

NPM Install--save-dev Gulp-imagemin

You can use gulp-imagemin plug-ins to compress jpg, PNG, GIF, and other pictures. (Imagemin also has Plug-ins, is based on Imagemin generated plug-ins, so the prefix is the Imagenin start)

Compressed PNG plugin-imagemin-pngquant installation:

$npminstall--save-devimagemin-pngquant

Gulpfile.js:

var gulp = require (' gulp ');
var imagemin = require (' gulp-imagemin ');
var pngquant = require (' imagemin-pngquant '); PNG image Compression plugin

gulp.task (' Default ', function () {return
    gulp.src (' src/images/* ')
        . Pipe (Imagemin ({
            Progressive:true,
            use: [Pngquant ()]///using Pngquant to compress PNG pictures
        }))
        . Pipe (Gulp.dest (' dist '));

Gulp-imagemin the use of more complex, it itself has a lot of plug-ins (more Imagemin plug-ins), here is just a brief introduction, to compress different formats of the picture, must correspond to install different plug-ins, here only installed the Pngquant plug-ins. According to Nodejs's modular thinking, each require contains only one function, so that it can be loaded on demand. gulp-livereload (automatic refresh)

Gulp-livereload Installation:

NPM Install--save-dev Gulp-livereload

When the code changes, it can help us automatically refresh the page, the plug-in is best with Google Browser, and to install the livereload Chrome extension extension, otherwise invalid.

var gulp = require (' Gulp '),
    less = require (' gulp-less '),
    livereload = require (' gulp-livereload ');

Gulp.task (' Less ', function () {
  gulp.src (' less/*.less '). Pipe (Less ()). Pipe (
    gulp.dest (' CSS ')
    ). Pipe (Livereload ()

); Gulp.task (' Watch ', function () {
  livereload.listen ();///To call here Listen () method
  Gulp.watch (' less/*.less ', [' less ' ]);  The file under the Listening directory, if the file changes, then invoke the less task.
});

Conclusion

Gulp Plug-in Basic introduction to the end of this, the specific use of each plug-in also need to explore the details of the problem will be more, when the problem is best to see the English API manual, so it is more convenient to use. If there is anything missing or wrong, please advise me more.