Gulp related knowledge (1)

This is a simple tool that is very easy to get started and has a variety of functions.

For example, the entire Web site packaging down, see the JS code is always confusing, this is similar to the gulp of the tool is encrypted, and many other features are not discussed here.

　　

The first is the installation of the gulp.

The installation of Gulp first requires a server, where node. js and Git Bash are installed. After installing the two things, go to the Gulp directory and right-click

Click Git Bash here.

Then enter node NODE_MODULES/GULP/BIN/GULP.JS-SW to enter the directory

You can then enter the instructions, such as

Node Node_modules/gulp/bin/gulp.js pair.

About the function of gulp, there are respectively--

(1) Less files

The less file is a syntactically very approximate CSS file that is easy to use because changes made on this less file are transferred directly to the overall CSS file for consolidation. This way you can create as many less files as you want, without having to squeeze all the CSS code together.

The less syntactically approximate less can also be used:

. a{width:300px;

height:300px;

background:red;

p{

color:red;

}

}

Yes, this thing can be nested so that the font color of the P element belonging to this class A will turn red.

Even if you change the structure of the mess it doesn't matter, the final integration will still change back-

. a{width:300px;

height:300px;

background:red;

}

. A p{

color:red;

}

(2) The "flow" of the file

In addition to these small things, gulp also has a flow function, a file placement, integration, synchronization, etc. can be done, for example--

Use the following code to modify the original file of gulp, you can do it--

Gulp.task ("conn", function () {
GULP.SRC ("src/css/*.less"). Pipe (Concat (' aa.css ')). Pipe (Gulp.dest (__dirname+ '/dist/css '))

})

Under the Arc folder under the root directory, all the. less files in the CSS file, "consolidated into one aa.css file", are copied to a path. This path is "root file path +/dist/css"

Because I do not learn a lot, so here is the list of machine grammar-

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

This represents the creation of a task Yahaha, which, when executed, executes the following function, and the result displays AA on the console.

And the way to do this is to execute node node_modules/gulp/bin/gulp.js in git bash.

With the task name in the back, the whole thing is: node node_modules/gulp/bin/gulp.js yhaha

The console display will also show a AA here.

Is the result of performing a pair task:

Sometimes, you can see the sentence--

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

.....

})

This means that before performing this task, the Task_one and task_two two tasks are performed first.

Here's the next one--

Gulp.task ("Auto_updatejs", function () {
Gulp.watch ("Src/example/js/*.js", [' Gulpconcat '])
})

Method, Gulp.watch represents the listener event, it listens to one or more files, and the code above listens to the "Src/example/js" in the root directory. All ends are. js files, once the file has changed (the criterion here is whether the file is saved), the change will trigger the event, thus performing the subsequent tasks.

Gulp.task ("Gulpconcat", function () {
GULP.SRC (' src/css/a.less '). Pipe (Gulp.dest ("C:/demo/testgyf/dist"))
GULP.SRC (' src/css/*.js '). Pipe (Gulp.dest (otherdist));

});

The first sentence means reading the data from the a.less in the path, and then saving it in a later path.

The second sentence means that all the. js files under the path are saved in the following path, which can naturally be variables.

GULP.SRC (' src/css/*.js '). Pipe (Concat (' aa.js ')). Pipe (Gulp.dest (Xiu))

After reading the data, the representative consolidates it into a aa.js and then stores it under the following path through the "pipe".

Gulp related knowledge (1)