Automated build Tools Gulp

1. Advantages 1.1 Easy to use

With code better than the configured strategy, Gulp makes simple tasks simple and complex tasks manageable

1.2 Build Fast

With the power of the node. JS Stream, you can quickly build projects and reduce frequent IO operations

1.3 Plug-in high quality

Gulp Strict plug-in guides ensure that the plug-in is as concise and high-quality as you would expect

1.4 Easy to learn

With minimal API, mastering gulp effortlessly, build your work at your command: Like a series of flow pipelines

2, Gulp use Instructions 2.1 installation

Enter CMD in the project root directory

Initialize NPM, create a new Package.json file under the project root directory

NPM Init

Gulp is installed in the global environment and saved to Package.json

NPM Install Gulp-g--save-dev

npm install module-name -save 自动把模块和版本号添加到dependencies部分

npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

2.2 Configuring Gulpfile.js

Create a Gulpfile.js file in the project root directory and configure it

A detailed method description will be mentioned later

2.2.1 Introducing the Gulp plugin

var gulp = require (' gulp '= require (' gulp-uglify '= require (' gulp-jshint '= require (' gulp-concat '= require (' gulp-watch '= require (' Gulp-clean '= require (' gulp-minify-css ')  = require (' Gulp-prefix-suffix ');

2.2.2 Merge Compression JS

// merge JS files to Build/all.min.js function () {     return gulp.src ([' Src/**/*.js ', '!src/lib/**/*.js ', '!src/app.js ', '!src/main.js ']) . Pipe (                jshint ())                . Pipe (Jshint.reporter (' default '))                . Pipe (concat (' all.min.js '))                . Pipe (Prefixandsuffix ("define" ([' app '), function (app) {","}); " )                 . Pipe (Uglify ())                . Pipe (Gulp.dest (' build '));});

2.2.3 Merging compressed CSS

// merge JS files to Build/all.min.js function () {     return gulp.src ([' Src/**/*.js ', '!src/lib/**/*.js ', '!src/app.js ', '!src/main.js ']) . Pipe (                jshint ())                . Pipe (Jshint.reporter (' default '))                . Pipe (concat (' all.min.js '))                . Pipe (Prefixandsuffix ("define" ([' app '), function (app) {","}); " )                 . Pipe (Uglify ())                . Pipe (Gulp.dest (' build '));});

2.2.4 Compressing pictures

// Merging compressed CSS files function () {     return gulp.src ([' Src/**/*.css ', '!src/lib/**/*.css '])                . Pipe (concat (' All.min.css ')                . Pipe (Minifycss ())                . Pipe (Gulp.dest (' build '));});

2.2.4 Compressing pictures

function () {     return gulp.src (' src/images/**/* ')                 truetrue  }))                 . Pipe (Gulp.dest (' dist/assets/img '))                 ' Images task complete ' }   );

optimizationLevel设置为3表示对所有来源的image进行压缩处理，设置位5表示仅对新的或者有改动的image进行压缩

2.2.5 Empty Build

// Empty Build function () {    return gulp.src (' Build ')               . Pipe (Clean ());});

2.2.6 Copy Files

For files such as third-party plug-ins or library frameworks that are not compressed in HTML and LIB, and compressed merged js,css,image, are copied from the development directory to the project run directory

//copy HTML, picture wait for buildGulp.task (' Copyother ',function(){    returnGULP.SRC ([' src/**/* ', '!src/**/*.js ']). Pipe (Gulp.dest (' Build '));});//Copy lib folderGulp.task (' Copylib ',function(){     returnGULP.SRC (' Src/lib/**/*.js '). Pipe (Gulp.dest (' Build/lib '));});//copy app.js and Main.jsGulp.task (' Copyjs ',function(){    returnGULP.SRC ([' Src/app.js ', ' src/main.js ']). Pipe (Gulp.dest (' Build '));});

2.2.7 File Change monitoring

function () {     gulp.watch (' src/**/* ', [' Default ']);})

2.3 Gulp Module Method description

gulp.task(name[, deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数  gulp.run(tasks...)：尽可能多的并行运行多个task  gulp.watch(glob, fn)：当glob内容发生改变时，执行fn  gulp.src(glob)：置需要处理的文件的路径，可以是多个文件以数组的形式，也可以是正则  gulp.dest(path[, options])：设置生成文件的路径

glob: Can be a direct file path. His meaning is pattern matching.
gulpThe files that will be processed are pipe() directed to the relevant plug-ins through the pipeline () API. Perform processing tasks for files through plug-ins.

2.3.1 Src ()

The SRC method of gulp is used to generate the data stream, and its parameters represent the files that you want to process, and the specified files are converted to data streams. The parameters are generally written in the following ways.

Js/app.js: Specifies the exact file name. Js/*.js: A directory with all the suffixes named JS files. Js/**/*.js: All files with a suffix named JS in a directory and all of its subdirectories. !js/app.js: All files except Js/app.js. *.+ (JS|CSS): matches the project root directory, all files with suffix js or CSS.

The parameters of the SRC method can also be an array to specify multiple members

GULP.SRC ([' Js/**/*.js ', '!js/**/*.min.js '])

2.3.2 Dest ()

The Dest method writes the output of the pipeline to a file and continues the output, so you can call multiple dest methods in turn to write the output to multiple directories. If a directory does not exist, it will be created

Gulp.src ('./client/templates/*.jade ')     . Pipe (Jade ())     . Pipe (Gulp.dest ('./build/templates '))     . Pipe (Minify ())     . Pipe (Gulp.dest ('./build/minified_templates '));

The Dest method can also accept the second parameter, which represents a configuration object

Gulp.dest (' Build ', {cwd: './app ', mode: ' 0644 '})

The Configuration object has two fields, the CWD field specifies the base directory of the write path, the default is the current directory, the Mode field specifies the permission to write to the directory, and the default is 0777.

2.3.3 Task ()

Task methods are used to define specific tasks. Its first parameter is the task name, and the second parameter is the task function

function () {   console.log (' Hello world! ' ); });

The task method can also perform a set of tasks in the specified order

Gulp.task (' Build ', [' css ', ' js ', ' IMGs ');

The above code first specifies the build task, which consists of CSS, JS, IMGs three tasks, the task method will perform these three tasks concurrently. Note that since each task is called asynchronously, there is no way to guarantee that the JS task will start running at the end of the CSS task run.

If you want each task to run in a strict order, you can write the previous task as a dependent module of the latter task.

function  () {     //});

The above code shows that the CSS task relies on the greet task, so the CSS must be run after the greet is finished.

The callback function of the task method can also accept a function as a parameter, which is useful for performing asynchronous tasks.

var exec = require (' child_process '). exec; Gulp.task (function    //     function(err) {         ifreturn//         //    }); });

If the name of a task is default, it indicates that it is a task, and the task is run by entering the Gulp command directly at the command line.

Gulp.task (' Default ', [' Styles ', ' jshint ', ' Watch ']);

Using gulp directly, you will run Styles,jshint,watch three tasks

2.3.4 Watch ()

The Watch method is used to specify which files need to be monitored, and once those files are sent, run the specified task

You can also use a callback function instead of a specified task

function () {    gulp.watch (' src/**/* ', [' Default ']);}) // or function () {    gulp.watch (' src/**/* ',function() {        //dosomething     });})

Another way to do this is when the Watch method monitors the file sending changes that may trigger some events, such as:

Change: Trigger when File send changes

End: Triggers when the callback function finishes running

Error: Triggered when an event occurs

Ready: Triggered when a file is started listening

NoMatch: Triggered when there are no matching listener files

2.4 Gulp Plugins

Common plugins

Compilation of SASS Automatically add CSS prefixes Compress CSS JS Code Check Merge JS Code Compression JS Code Compress pictures Automatically refresh pages Picture cache (only images are compressed if they are replaced) Change reminders Purge files	(Gulp-ruby-sass) (gulp-autofixer) (GULP-MINIFY-CSS) (Gulp-jshint) (Gulp-concat) (gulp-uglify) (gulp-imagemin) (Gulp-livereload) (Gulp-cache) (gulp-notify) (Gulp-clean)

http://gulpjs.com/plugins/on the Gulp official website There are many optional plug-ins, about 600, the core of these plug-ins, a plugin only do one thing!

3. Gulp and grunt3.1 work flow

Grunt Workflow: Read files, modify files, write files, read files, modify files, write files .....

Gulp Workflow: File stream-File stream-file stream ... Because the grunt operation creates temporary files, there are frequent IO operations, and Gulp uses stream operations, which are always processed in memory until the results are output, so gulp is indeed far more efficient than grunt.

3.2 Differences and different

• Stream: Gulp is a stream-based build system that uses code better than the configured policy.
• Plugins: Gulp plug-ins are more pure, single-function, and stick to a plugin that only does one thing.
• Code is better than configuration: Maintaining Gulp is more like writing code, and Gulp follows the COMMONJS specification, so there's no difference between writing a node program.
• No intermediate file produced

3.3 I/O process is different

• Some interim files are generated during I/O with grunt, some tasks generate temporary files, other tasks may be processed based on temporary files, and the resulting files will be built.
• The advantage of using Gulp is to use the flow of the file processing, through the pipeline to connect multiple tasks and operations, so only one I/O process, the process clearer, more pure

4. References

• Http://www.gulpjs.com.cn/gulp Chinese website
• HTTP://JAVASCRIPT.RUANYIFENG.COM/TOOL/GULP.HTML#TOC2 Gulp: Task Auto-management tool-JavaScript standard reference tutorial (Alpha)
• Http://www.techug.com/gulp Gulp User Guide
• http://segmentfault.com/a/1190000002580846 Building your front-end project with Gulp

Automated build Tools Gulp