Use of Gulp

Objective

For front-end automation, you might start thinking about grunt and the first thing to learn is also it. Yes, when I first learned grunt, it was really handy, and a lot of extra operations could be done automatically with a single command. And the way I use grunt is very simple, just for better protection of the F5 key.

Grunt Auto Refresh

Before using grunt, you need to create a new Package.json file at the root of the project, and we can npm init do this by automatically creating the file and then following the prompts to enter the relevant information. (The unknown can be skipped directly by a carriage return.) ）

The next step is to load the required three grunt plugins: Grunt-contrib-connect,grunt-contrib-livereload,grunt-contrib-watch. And we choose to load via NPM: npm install 插件 --save-dev so the devdependencies in the Package.json file will automatically fill in the plugin that you just downloaded.
Next, you need to create a new file in the root directory Gruntfile.js file, which requires you to use the grunt configuration, and I will generally use the configuration code to back up, the use of the direct copy in.

Module.exports = function(grunt) {Grunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), watch: {livereload: {options: {livereload:' <%= connect.options.livereload%> '}, files: [' index.html ',' static/** ']}, connect: {options: {port:8000, open:true, Livereload:35729, hostname:' localhost '}, Server: {options: {port:8001, Base:'./'}      }    }  }); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' Grunt-contrib-connect '); Grunt.registertask (' watching ',[' Connect ',' Watch ']); Grunt.registertask (' Default ');};

Then we can enter it directly on the command line grunt watching .
PS: Put some img, JS, CSS files in the static directory.
The above we can in the editor is only responsible for writing the corresponding code, save the browser page will be automatically updated, without us to refresh. This is very convenient indeed. But:
When I want to use other plugins, such as grunt-contrib-less, Grunt-autoprefix and other plugins, you must write the configuration of these new plugins again. At this point, you must consult the relevant documentation to learn how other plug-ins are configured to be written. You'll feel a lot of trouble at this point, especially when it's a long time, and you'll forget about the plugin's writing format. This forces you to use a different, simpler way of automating, such as Gulp

Gulp

As for Gulp's study you can refer to Gulp Chinese official website Gulp Chinese official website, the API is very few, only 4:

• GULP.SRC () reads a file and returns a file stream. Chain operation can then be called with pipe () multiple times
  The file name matching format is read as follows:

  • "*" matches any file name, does not contain a directory
  • "* *" matches any directory and files in the corresponding directory
• Gulp.dest () to generate files from a stream in a pipeline
• Gulp.task () Defining tasks
• Gulp.watch () Monitor file transformations, perform tasks

Next, we mainly explain the use of some gulp plug-ins in my actual project.
First, you need to create a new Package.json file in the root directory, and then download the Gulp and the Gulp plug-in you need, the same steps in this grunt. The plugins used are:

• Compilation of Gulp-less Less
• Gulp-autoprefixer Loading CSS Prefixes
• Gulp-concat file Merge
• Gulp-minify-css CSS File compression
• Gulp-jshint JS Code Check
• Gulp-uglify js file compression
• gulp-minify-html HTML file compression
• Gulp-imagemin image Compression
• Gulp-rename File Rename
• Gulp-load-plugins One-time loading plugin
• Gulp-livereload Auto Refresh Plugin
• Gulp-connect and Livereload work together to construct a virtual server

Next, we need to create the Gulpfile.js file in the root directory, and then write some plug-in processing inside.
Gulp-less and Gulp-autoprefixer

varrequire(‘gulp‘),    require(‘gulp-less‘),    require(‘gulp-autoprefixer‘);gulp.task(‘compile‘function() {    gulp.src(‘static/less/*.less‘)        .pipe(less())        .pipe(autoprefixer())        .pipe(gulp.dest(‘static/style‘));});

Gulp-concat

varrequire(‘gulp‘),    require(‘gulp-concat‘);gulp.task(‘concat‘function() {    gulp.src(‘static/style/*‘)        // 合并匹配的css文件并命名        .pipe(concat(‘all.css‘))        .pipe(gulp.dest(‘static/css‘));});

File compression

varrequire(‘gulp‘),    require(‘gulp-minify-css‘);gulp.task(‘miniCss‘function() {    gulp.src(‘static/css/*‘)        .pipe(minifyCss())        .pipe(gulp.dest(‘static/css‘));});

Html,js file compression is the same as this.
In addition, the file name cannot be changed during the compression process because gulp is manipulated by the way it is streamed. The rename plugin is required to change the file name.
Gulp-rename

require(‘gulp‘),    require(‘gulp-minify-css‘),    renamerequire(‘gulp-rename‘);gulp.task(‘miniCss‘, function() {    gulp.src(‘static/css/*‘)        .pipe(minifyCss())        .pipe(rename(‘all.min.css‘))        .pipe(gulp.dest(‘static/css‘));});

Gulp-imagemin
GIF, JPEG, PNG, SVG image compression, other files directly ignored.
Ps:png image compression used to imagemin-pngquant plugin.

varGulp =require(' Gulp ');varImagemin =require(' Gulp-imagemin ');varPngquant =require(' Imagemin-pngquant '); Gulp.task (' Imgmin ', function () {    returnGULP.SRC (' static/images/* '). Pipe (Imagemin ({ Use: [pngquant()]        }))        .Pipe(Gulp.dest(‘Static/img‘));});

Gulp-load-plugins
The plug-in is loaded all gulp plugins at once based on the configuration in the devdependencies in the Package.json file. Imagine that when we need to load all the above plugins at the same time, we need require() to load them again and again. To avoid the tedious, we can use the plugin. Package.json in the devdependencies:

"Devdependencies": {    "Gulp":"^3.9.0",    "Gulp-rename":"^1.2.2",    "Gulp-load-plugins":"^1.0.0-rc.1",    "Gulp-concat":"^2.6.0",    "Gulp-minify-css":"^1.2.0",    "gulp-uglify":"^1.2.0",    "Gulp-livereload":"^3.8.0",    "Gulp-connect":"^2.2.0",    "Gulp-autoprefixer":"^2.3.1",    "gulp-less":"^3.0.3",    "Gulp-jshint":"^1.11.2",    "gulp-minify-html":"^1.0.4",    "Gulp-imagemin":"^2.3.0",    "imagemin-pngquant":"^4.1.2"  }

The Ps:imagemin-pngquant plugin needs to be loaded manually.

varGulp =require(' Gulp ');varPlugins =require(' Gulp-load-plugins ')();varPngquant =require(' Imagemin-pngquant '); Gulp.task (' Imgmin ', function () {    returnGULP.SRC (' static/images/* '). Pipe (Plugins.imagemin ({ Use: [pngquant()]        }))        .Pipe(Gulp.dest(‘Static/img‘));});

After loading, we can use the corresponding plug-in in the form of name plugins.name , the name of the corresponding plug-in name minus the gulp prefix, if there is "-" in the middle, then use the hump format. Such as:

require(‘gulp-minify-html‘);

Gulp-livereload and Gulp-connect

varGulp =require(' Gulp '),varLivereload =require(' Gulp-livereload '),varConnect =require(' Gulp-connect ');//Build ServerGulp.task (' Connect ', function() {Connect.server ({root:'./',//Server root directoryPort8000,//Port numberLivereload:true});}); Gulp.task (' HTML ', function() {GULP.SRC (' index.html ')//Get Auto Refresh page. Pipe (Livereload ());}); Gulp.task (' watching ', [' Connect '], function () {Livereload.listen (); Gulp.watch ([' index.html ',' static/style/* ',' static/img/* '],[' HTML ']);//monitor related files, bind refresh page});

Through the above introduction, you will find that gulp is indeed a little better than grunt ...

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Use of Gulp