Gulp Learning and Finishing

Using Gulp:

1. Solve version problems with JavaScript and CSS.

2. To solve the problem of JavaScript and CSS dependencies, in loading order, building tools can greatly reduce such problems.
3. In the performance optimization, when the project has a large number of JS files, the more files you request, the more time it takes, this will undoubtedly slow down the speed of the page, and gulp can be: file merging, file compression to solve.
4. On the gulp of efficiency, we can:
Vendor prefix: In the CSS3 use more and more time, we all know some CSS features, different browser CSS has different prefixes, if we manually add will be very cumbersome, and if using the build tool, many build tools can automatically add CSS to my vendor prefix.
Unit testing: JavaScript unit tests are getting easier after using MVC or MVVM frameworks, and unit testing is an important means of quality assurance, so it's important to use the build tool to run our unit tests automatically before committing.
Code Analysis: We write javascript many times there will be some potential bugs, such as forget to add a semicolon, a variable no, and so on, using some JavaScript code analysis tool, can be very good to help us check some common problems.
HTML refers to JavaScript or CSS files: for example, we need to use Bower to refer to the front-end JavaScript and CSS third-party libraries, if the version upgrade, add Remove and so on by hand to modify the HTML, first more time-consuming, the second more easily overlooked, Especially when we need to switch between debug and production versions, there will be a lot of extra work, so using the front-end build tool can be a good solution to these problems.

Comparison of gulp and grunt?

Grunt

Configuration too complex
Plug-in responsibilities are not single (no SRP)
Temp file directory multiple
Slow performance (due to more temporary files, more natural read IO)

Gulp
Code first. And the relative grunt code is more concise and clear
Based on Flow
1000+ Plug-in

Installation and use of Gulp:

1.GULP Installation:

First we need to install NODEJS, check whether the installation is successful and version node-v through-V, npm-v

Global installation: NPM install Gulp-g

After the global installation, you will also need to switch to the root of the project and install it separately for individual projects; Install the following: NPM Install Gulp

If you want to write gulp into the Package.json file dependencies when installing, you can add –save-dev example: NPM Install Gulp--save-dev

4 APIs for 2.gulp:

1.gulp.task:
Gulp.task (name [, Deps, FN])
Register a task, name is the name of the task, Deps is optional, that task depends on tasks, and FN is the function to be executed by the task

2.GULP.SRC:
GULP.SRC (globs[, Options])
A file that matches globs, which can be a string or an array

3.gulp.dest

Define Gulp.dest (path[, Options]) is the final file to output the path, options generally do not

4.gulp.watch

Gulp.watch (Glob [, opts], tasks) or Gulp.watch (Glob [, opts, CB]) is the change of the monitor file, then runs the specified tasks or functions, which requires a plug-in compared to grunt, The gulp itself is well supported.

3. Use Gulp:

1. Create and configure Package.config files with Gulp init
2. Create the Gulpfile.js file manually, gulp the default is to call the file
3. Download the required plugin under DOS command such as: NPM install Gulp-concat--save-dev
NPM Install Gulp-strip-debug--save-dev
NPM Install gulp-uglify--save-dev
NPM Install Gulp-jshint--save-dev
NPM Install Gulp-rename--save-dev

In gulpfile first need to declare: var gulp = require (' gulp ');
var jshint = require (' Gulp-jshint ');
Gulp.task ('jshint', function () {
Gulp.src ('./src/scripts/*.js ')
. Pipe (Jshint ())
. Pie (Jshint.reporter (' Default '));
});
Execute in DOS command: Gulp jshint

　　　　

Understand the use of Gulp.watch ():

var gulp = require (' gulp '); var concat = require (' Gulp-concat '); var uglify = require (' gulp-uglify '); var paths = {  Scrip TS: [' src/js/**/*.js '],  css: [' src/css/**/*.css '],  //The source file HTML is placed under SRC and will be automatically packaged into the specified directory under  HTML: [' src/html/**/* . html ']};gulp.task (' Scripts ', function () {  return gulp.src (paths.scripts)    . Pipe (concat (' all.js '))    . Pipe (Uglify ())    . Pipe (Gulp.dest (' Build/js ');}); Gulp.task (' CSS ', function () {  return gulp.src (PATHS.CSS)    . Pipe (concat (' all.css '))    . Pipe (Gulp.dest (' Build/css ');}); /Listen for changes to the HTML file gulp.task (' HTML ', function () {    return gulp.src (paths.html)        . Pipe (Gulp.dest (' html/'));}); /rerun the task when a file changesgulp.task (' Watch ', function () {  gulp.watch (paths.scripts, [' Scripts ']);  Gulp.watch (PATHS.CSS, [' CSS ']);  Gulp.watch (paths.html, [' html ']);}); The default task (called when you run ' Gulp ' from CLI) gulp.task (' Default ', [' Scripts ', ' CSS ', ' html ', ' Watch ']);

Gulp Learning and Finishing