Gulp Front-end automation building Tools Primer

Now we learn through these 3 questions;

1, what is gulp?2, why use gulp?3, how to use? What is Gulp answer: is a front-end automation of the building tools, straightforward point, without this tool, we can still use artificial to achieve the following advantages, but when the project is becoming large, the use of this tool can improve performance and efficiency. Why Use Gulp? A: 1, JS and CSS are static files, many times the browser has a caching mechanism, in order to avoid the misunderstanding of the cache, you can use the build tool, to each static file to add a version number, so that the browser will be considered a new file, there is no caching mechanism. 2, performance optimization: File merging, reduce the HTTP request, file compression, reduce file volume, speed up the download speed, 3, efficiency increase: Automatically add CSS3 vendor prefix; code analysis check correction; After using the MVC and MVVM framework, you can Use gulp to run the unit test automatically; 1, first, install the gulp before installing the NODEJS environment, because Gulp is Nodejs-based front-end build tool $ NPM Install--global GULP2, then, on the development project, the installation project depends on (devdependencies) $ npm Install--save-dev GULP3, continue, create a file named: Gulpfile.js in the root directory of the project to configure Gulp related task:$ touch gulpfile.js--Please open gulpfile.js, enter the following: var gulp = require (' gulp ');

This line tells node that the local (node_modules) to find the Gulp package, can not find the global lookup. When it is found, it is assigned to the Gulp variable, and then we can use it.

--How to configure the Gulp task:

Gulp.task (' Task-name ', funcion{//stuff here});

This is the approximate template for Gulp set task, ' Task-name ' is the name you give to the task, and later executes Gulp task-name on the command line, which executes the task.

Write a Hello world, that's it.

Then execute at the command line

$ Gulp Hello

Operation Result:

Well, it's been running! This is probably the task, and now we're going to write a formal gulp mission.

For example, to compile the sass, the task code is:

. SRC is the source path to the file; pipe is the pipeline where the task runs;. dest is the output path after the task ends.

At the same time the Sass file content is, the following score is not calculated:

OK, the code is finished, execute the command at the command line $ gulp Sass,

After compiling, you will see in the path to the CSS output that a. css file with the same name is generated, and the content is the result of SASS compilation:

Gulp also has a number of other plugins, such as compression, merging, adding vendor prefixes (CSS3-compatible prefixes for each browser), and so on, all of which are similar to the above practice.

Gulp basic usage is probably the case, he has a lot of other plug-ins, can be easily developed, such as automatic refresh, monitoring events and so on, the following is a common plugin link: the top, run-sequence

Links:

role : Let gulp tasks, can be independent of each other, to remove dependencies between tasks, enhance task reuse

No.2, Browser-sync

Links:

function : Static file server, also support automatic browser refresh

No.3, Del

Links: Https://www.npmjs.com/package/del

role : Delete files/folders

No.4, Gulp-coffee

Links:

function : Compile coffee code for JS code, use Coffeescript necessary

No.5, Coffee-script

Links:

function : gulpfile default with JS suffix, if you want to use Gulpfile.coffee to write, then need this module

No.6, Gulp-nodemon

Links:

function : Automatically start/Restart your node program, develop node server program Prerequisites

No.7, Yargs

Links:

function : Used to get startup parameters, for different parameters, switch task execution process needs

No.8, Gulp-util

Links:

role : Gulp Common Tool Library

No.9, Gulp-uglify

Links:

function : Compress js file by Uglifyjs

No.9, Gulp-concat

Links:

function : Merge JS

No.10, Gulp-sourcemaps

Links:

function : When processing js, generate Sourcemap

No.11, gulp-less

Links:

role : preprocessing less as CSS

No.12, Gulp-sass

Links:

role : preprocess sass to CSS

No.13, Gulp-autoprefixer

Links:

role : Use Autoprefixer to complement browser-compatible CSS.

No.14, Gulp-minify-css

Links:

role : Compress CSS.

No.15, Connect-history-api-fallback

Links:

Source: Http://www.yidianzixun.com/n/0CUI9w1Z?s=8&appid=xiaomi

Gulp Front-end automation building Tools Primer