Gulp Study Notes

About Learning Gulp, recommend you look at the front-end building tools Gulpjs use of introduction and skills, this article is quite comprehensive.

　　1 , installation of Gulp

　　Gulp was developed based on Nodejs, so it was first determined that Nodejs was installed.

(1) Global Installation Gulp

NPM Install-g Gulp

(2) Local Installation gulp for the project

NPM Install Gulp

(3) Install the Gulp dependency package in the project directory

NPM Install--save-dev Gulp

Or install all of the dependencies configured in Package.json under the project directory

NPM Install

{  "name":"Gulp",  "version":"1.0.0",  "Description":"This is a Gulpjs practice",  "Main":"Gulpfile.js",  "Dependencies": {    "Gulp":"^3.9.1",    "gulp-uglify":"^2.0.0",    "Gulp-concat":"^2.6.1",    "gulp-minify-html":"^1.0.6",    "Gulp-minify-css":"^1.2.4"  },"Scripts": {    "Test":"echo \ "Error:no test specified\" && exit 1"  },  "author":"Heshuaishuai",  "License":"ISC"}

　Use of 2.gulp

　　(1) first create a gulpfile.js file in the root directory of the project

/**
* Created by Heshuaishuai on 2016/12/5.
*/
var gulp = require (' Gulp '),//Load Gulp module
Uglify = require (' gulp-uglify '),//Load compression JS module
Concat = require (' Gulp-concat '),//Load merge module
Htmlmin = require (' gulp-minify-html '),//Load compressed HTML module
Cssmin = require (' gulp-minify-css ');//load Compression CSS Module
Output Hello
Gulp.task (' Hello ', function () {
Console.log (' Hello ');
});
Compression JS
Gulp.task (' Minify-js ', function () {
GULP.SRC (' Js/*.js ')
. Pipe (Uglify ())
. Pipe (Gulp.dest (' Dest/js '));
});
Merge JS
Gulp.task (' Concat-js ', function () {
GULP.SRC (' Dest/js/*.js ')
. Pipe (Concat (' all.js '))
. Pipe (Gulp.dest (' Dest/js '));
});
Compress HTML
Gulp.task (' minify-html ', function () {
GULP.SRC (' index.html ')
. Pipe (Htmlmin ())
. Pipe (Gulp.dest (' dest/html '));
});
Compress CSS
Gulp.task (' Minify-css ', function () {
GULP.SRC (' Css/*.css ')
. Pipe (Cssmin ())
. Pipe (Gulp.dest (' dest/css '));
});
Gulp.task (' Default ', [' Hello ', ' minify-js ', ' concat-js ', ' minify-html ', ' minify-css ']);

The Require () function is used to load a dependent module,

Gulp.task (), create a task function,

Gulp.task ("Default", []) is the default task, and when the command-line Data Gulp command, the tasks in the array after default are automatically executed.

　　(2) Running Gulp

Gulp

　　

　　3. Gulp API

　　Gulp API mainly has gulp.task, gulp.src, Gulp.dest, Gulp.watch;

(1) Gulp.task

Create a task function　　　

Gulp.task ('hello', function () {    console.log ('Hello  ');});

(2) Gulp.src

　　　　Used to locate the file to be processed. Support for the "*" syntax, such as: "main/*", "Js/*.js", "* *" represent all folders.

Pipe () Returns the processing structure for the cohesion of the subsequent operation.　　　　

GULP.SRC (' js/*.js ')
. Pipe (Uglify ());

(3) Gulp.dest

The output path of the file being processed.　　　　

Gulp.pipe (Gulp.dest ('dest/js'));

(4) Gulp.watch

The files in the previous parameter address are monitored, and the tasks in the following parameter array are executed when the contents of the file change.　　　　

Gulp.watch ('less/*.less', ['testless']);

　　4. Gulp Plug-in

(1) Compression JS

NPM Install--save-dev gulp-uglify

Gulp.task ('minify-js', function () {    gulp.src ('js/*.js ' )        . Pipe (Uglify ())        . Pipe (Gulp.dest ('dest/js');});

(2) Merge JS

NPM Install--save-dev Gulp-concat

Gulp.task ('concat-js', function () {    gulp.src ('dest/js/*.js  ')        . Pipe (concat ('all.js'))        . PIPE ( Gulp.dest ('dest/js');});

(3) Compress CSS

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

Gulp.task ('minify-css', function () {    gulp.src ('css/*.css  ')        . Pipe (Cssmin ())        . Pipe (Gulp.dest ('dest/css' ) ));});

That's all there is to say, other similarities.

　　

Gulp Study Notes