gulp--Flow-based automation build tool

Catalogue

1. Gulp Introduction
2. Gulp API
3. Gulp Common Tasks
4. Use of Gulp

4.1 Gulp installation 4.2 create gulpfile.js 4.3 run gulp

5. Extended Reading

Gulp IntroductionGulp.js is a front-end Automated build Tools, front-end developers can use it to automate common tasks during the project development process. Gulp.js is based on Flow (Stream)The output of the previous step is directly passed through the piping (pipe)Input to the next step, you can quickly build projects and reduce frequent IO operations. Reference: English official website: http://gulpjs.com/ Chinese official website: http://www.gulpjs.com.cn/   Gulp API   Gulp provides 4 APIs

1. GULP.SRC (globs[, Options])
2. Gulp.dest (path[, Options])
3. Gulp.task (name [, Deps] [, FN])
4. Gulp.watch (Glob [, opts], tasks) or Gulp.watch (Glob [, opts, CB])

Reference:https://github.com/gulpjs/gulp/blob/master/docs/API.md Gulp Common Tasks

1. Compiling sass\less
2. Compress CSS
3. Compression JS
4. Uglify
5. Jshint
6. Merging Sprite Chart
7. Merging files
8. Autoprefixer
9. Livereload
10. Compiling JSX
11. Clean up the destination folder file
12. ......

Reference: a variety of gulp plugins can be searched at NPM website: https://www.npmjs.com/ The Common Gulp plugins are listed by type: Https://github.com/vigetlabs/gulp-starter Use of Gulp(as an example of compiling a sass file)   Gulp Installation Global Installation

NPM Install-g Gulp #全局安装

Partial Installation

NPM Install Gulp--save-dev # Local Installation

Installing the Gulp plugin

NPM Install Gulp-sass  --save-dev

Create Gulpfile.js introduction of Gulp and plugins

var Gulp    = require (' Gulp '),                //BASE library    sass = require (' Gulp-sass ');              Sass

Create a task

Gulp.task (' CSS ', function () {    var csssrc = './src/scss/*.scss ',        cssdst = './dist/css ';     GULP.SRC (CSSSRC).        Pipe (Sass ({style: ' expanded '}). Pipe (Gulp.dest (CSSDST        ))        . Pipe (MINIFYCSS ())        . Pipe (livereload (server))        . Pipe (Gulp.dest (CSSDST));});

Monitoring Tasks

Gulp.task (' Watch ', function () {     Server.listen (port, function (err) {        if (err) {            return Console.log (err)        }         //Monitor CSS        gulp.watch ('./src/scss/*.scss ', [' CSS ']);});     

Perform Tasks

Gulp.task (' Default ', [' CSS ']);

Run GulpStart the command line tool, switch directories to the Gulpfile folder, and enter Gulp to run the task. Reference:http://www.dbpoo.com/getting-started-with-gulp/ Extended Reading

1. Grunt, gulp, webpack contrast: https://npmcompare.com/compare/browserify,grunt,gulp,webpack
2. How to increase the packing speed of browserify in Gulp 1190000004932832
3. Gulp Configuration browserify Multi-entry file: http://fettblog.eu/gulp-browserify-multiple-bundles/
4. gulp+browerify:https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623#.ydz238y6u
5. Gulp+browerify:https://www.viget.com/articles/gulp-browserify-starter-faq

gulp--Flow-based automation build tool