Getting started with gulp.js automated build tools

First, the basic installation

1, Installation Gulp

1 $ npm Install--global Gulp

2, as the development of the project according to Ryan installed

1 $ npm Install--save-dev Gulp

3. Create a gulpfile.js file in the project root directory

1 var gulp = require (' Gulp ') 2 3 gulp.task (' Default ', function () {4     //Put your default task code here 5 })

4. Running Gulp:

$ gulp

The following articles refer to the Source: Rin Yang Qi Connect: https://www.jianshu.com/p/98db023b5b89

Second, Front end Automation Gulp Tools Common plug-in

1, 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 Gulpvar uglify = require (' gulp-uglify ');  Load JS compression//Define a task Minifyjsgulp.task (' Minifyjs ', function () {    gulp.src ([' Js/*.js ', '!js/*.min.js '])  //Get the file, Also filter out the. min.js file        . Pipe (Uglify ())   //Compression        . Pipe (Gulp.dest (' Dist/js '));   Output});

2 , 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 (' dist/css '));});

3 , 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 (' dist/minihtml '));})

4, Gulp-imagemin (image compression)

Gulp-minify-html Installation:

NPM Install--save-dev Gulp-imagemin

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

Compress PNG plugin-imagemin-pngquant installation:

NPM Install--save-dev imagemin-pngquant

Gulipfile.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 images        })        . Pipe (Gulp.dest (' Dist/imgmini '));

5 , Gulp-concat (file merge)
Gulp-concat Installation:

NPM Install--save-dev Gulp-concat

Combine 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.min.js '))  // Merge the matching JS file and name it "All.js"    . Pipe (Uglify ())//Compression    . Pipe (Gulp.dest (' Dist/js '));//output});

6 , Gulp-css-spriter ( synthetic Sprite chart)

Gulp-css-spriter Installation:

NPM Install Gulp-css-spriter

Gulpfile.js file:

var gulp = require (' gulp '); var spriter=require (' Gulp-css-spriter ');

Gulp.task (' Spriter ', function () {    gulp.src ('./src/assets/css/user.css ')        . Pipe (Spriter ({            ' Spritesheet ': ' dist/imgmin/spritesheet.png ',//This is the sprite chart automatically synthesized by the figure            ' pathtospritesheetfromcss ': '. /.. /.. /dist/imgmin/spritesheet.png '//This is the picture path referenced in CSS        })        . Pipe (Gulp.dest ('./dist/css '));//output})

7 . Perform multiple tasks and monitor file changes

Gulp.task (' Build ', [' minifyjs ', ' imagemin ', ' cssmin ']);//Listener File Change gulp.task (' Watch ', function () {     gulp.watch ([' Static/mui/js/*.js ', ' static/*.js ', '!static/mui/js/*.min.js ', ' src/assets/img/* '], [' Build '];/}); Gulp.task (' Default ', [' Build ', ' watch ']);

Getting started with gulp.js automated build tools