Gulp related Knowledge (2)

To sort out the theoretical parts of the previous stuff--

Gulp Front-end build tool It can help us do some automated things

It needs some plug-in support

var gulp = require (' gulp '); --Gulp Command

Require (' Yargs '). argv;
It can listen for the parameters added after gulp

Close Gulp Server: Execute CTRL + C
var less = require (' gulp-less '); -->> less preprocessor, which is intended to convert. less files to normal CSS files
var header = require (' Gulp-header ');

var minify = require (' gulp-minify-css ');
Compress the CSS file

var autoprefixer = require (' gulp-autoprefixer ');
Automatically add CSS3 prefixes

var rename = require (' Gulp-rename ');

var sourcemaps = require (' gulp-sourcemaps ');

var Browsersync = require (' Browser-sync ');
This plugin is the plugin that will be used to refresh the browser synchronously.
var uglify = require (' uglifyify ');

var concat = require (' Gulp-concat ');
This plug-in function to A.js b.js C.js automatically merged into the same JS file

Gulp directory Structure
Fundamental purpose: the separation of concerns
Dist--Web pages to be published to the server directory (only concerned about the final publishing environment)
SRC--The directory that developers will use when developing (only concerned with the development environment)
Node_modules----Plugin dependency collection files required by automation tools

Gulp Basic use:
Need support from Nodejs
Installation:
1. NPM Install-g Gulp
2. NPM Install-save-dev Gulp
If the installation is successful, you can run the Gulp command directly

If all fails: node "node_modules\gulp\bin\gulp.js"--Gulp

Assuming you now need the less preprocessor plug-in in gulp, first you need to install
NPM Install-save-dev gulp-less
Once installed, you need to introduce it and execute
var less = require (' gulp-less ');

Gulp implementation Environment has a unified standard, can only be executed in Gulpfile.js

The most central thing in Gulp is called task.
Gulp Gongyifeng
Grammar:
Gulp.task ("Gongyifeng", function () {
Console.log (' Gongyifeng ')
})

Gulp.task ("Task_one", function () {
Console.log (' Task_one ')
})

Gulp.task ("Task_two", function () {
Console.log (' Task_two ')
})

Gulp.task ("Task_three", [' Task_one ', ' task_two '], function () {
Console.log (' Task_three ')
})

Gulp it performs a default task the name is called default.

Gulp.watch//gulp Listening operation, it can listen to the changes in the file, then complete some things

Grammar:
Gulp.watch (' src/index.html ', [' task_three ']);
It means: When the content of src/index.html is found to be changed, the contents of Task_three are executed.

The core of the design in gulp is called the stream.

The location of the river flows is determined by Gulp.dest (C:/project).
var option = {base: ' src '};
var dist = __dirname + '/dist ';

There are special variables in the node. JS environment with a variable inside it: __dirname:
__dirname: Where the current directory is located it is now equivalent to c:\techerfolder\gulp/

Now the river flows to C:\techerfolder\gulp/dist

When you need to get the river (file stream) into a specific location, you need to find the origin of the river, then what to look for?

The answer is:
GULP.SRC (birthplace)
Pipe (Flow)
Gulp.dest (' c:\techerfolder\gulp/dist ') incoming destinations

GULP.SRC--the inherent method in > Gulp--Find the birthplace of the river (file stream)
GULP.SRC (' src/index.html '). Pipe ()

GULP.SRC (' src/example/**/* ')
GULP.SRC (' src/example/**/*.! (less) ', option)
. Pipe (Gulp.dest (Dist))
. Pipe (Browsersync.reload ({stream:true}));

Here, gulp is often used to grammar to complete the introduction.

Now we're going to explain Gulp's role in the front-end field.

We can use the open source plug-in to assist our front-end development

The first gulp plug-in and Gulp-concat merge the corresponding files to:
So that we can in the development environment, very good division of the module;

Gulp related Knowledge (2)