Gulp of the front-end building artifact

　

Because of the typhoon "could hung" influence, this weekend could not go out on foot, in order not to waste this good time, so summarize the previous period of time to learn gulp.

Gulp is now the most Popular front-end build tool, it is more significant feature is the configuration is easy to learn, and gulp the greatest advantage is that it is the use of the flow (Streams) to the processing of files, through the pipeline (pipe) Multiple tasks (task) and operations linked together. So the process is clearer. The build speed is also faster than grunt (another front-end build tool). (If the project is small, the speed gap is not so obvious)

Gulp Installation

1, first ensure that your operating environment has installed the nodejs environment. Then open the terminal to run:

　　NPM Install Gulp-g

2 . After the global installation is successful, you will need to install it separately in the project you are building. Open the terminal into the project directory to run:

　　NPM Install Gulp--save-dev

Where --save-dev is optional, if plus means that you need to write gulp to the project Package.json file's dependency, otherwise it is not written.

3. Next, create the Gulpfile.js file under the project root directory (this must be the name)

1 var gulp = require (' gulp ');     // -Import gulp via require () 2 3 function () {4     console.log (' Hello World '); 5 });

4. Finally run Gulp in terminal

When you click Enter, you will find that the console prints ' Hello World ', which shows that gulp was introduced successfully.

Gulp API Learning

Learning technology is of course the first to understand the technical API documentation, so we will learn a gulp that way. In fact, the use of Gulp only requires us to understand 4 methods. They were gulp.task (), GULP.SRC (), Gulp.dest (), Gulp.watch ();

Gulp.task (NAME[,DEPS],FN)

Gulp.task () is used to define tasks;

Name: Define the Task Name

Deps: Optional parameter, the current task needs to depend on other tasks, as an array. If this parameter is defined, the task will be executed after the other dependent tasks have been completed.

fn: Defines the task function, which is the code that this task needs to execute.

After the definition is complete, we can enter:Gulp <--taskname--> Perform this task on the command line.

For example, we set up a task defined in step 3, where default is the task name, and the function behind it. On the command line, enter: Gulp default

Note: Default is an gulp task, so default can omit to write.

GULP.SRC (Globs[,options])

GULP.SRC () is the Get action file stream (Streams). However, it is important to note that this stream is not the original file stream, but a virtual file object stream, which stores the original file path, file name, content, and so on. This method returns a Streams.

Globs: File matching mode (somewhat similar to regular expression) is the URL of the file that needs to be read, which matches the file path or filename, and can be an array if there are multiple matching patterns.

Options: Optional Parameters

To give a simple chestnut:

1 var gulp=require (' Gulp '23//4 gulp.task (' GetFiles ') ,function() {5     //6 });

As for the parameter globs, here are a few of the things that are commonly used:

• + * : matches 0 or more characters in the path, but does not match the path delimiter and '/' unless the path delimiter appears at the end
• + ** : Match 0 or more directories in a path and their subdirectories
• + ?    ： matches one character in the path, but does not match the path delimiter
• + [...] : match any one of the characters that appear in the square brackets when the first character in the square brackets is ^ or!, or any of the other characters that appear in the square brackets, similar to the usage in the JS regular expression
• + !(pattern|pattern) : Matches anything that does not match any of the patterns given in parentheses
• + ?(pattern|pattern)： Matches any pattern given in parentheses 0 or 1 times, similar to the JS regular expression(pattern|pattern)?
  
• + +(pattern|pattern)： Matches any pattern given in parentheses at least 1 times, similar to the JS regular expression(pattern|pattern)+
  
• + *(pattern|pattern)： Match any pattern given in parentheses 0 or more times, similar to the JS regular expression (pattern|pattern) *
  
• + @(pattern|pattern)： Matches any given pattern in parentheses 1 times, similar to the JS regular expression(pattern|pattern)

File matching chestnuts are as follows:
+*  Can matcha.js、b/、c，But it doesn't match.a/b.js
+*.* Can matcha.js,b.css,c.html，但不能匹配a/b.js
+*/*/*.html Can match a/b/c.html, cannot matcha/b.html，a/b/c/d.html
+**/*.js Can matcha.js,a/b.js,a/b/c.js,a/b/c/a.js 
+a/**b/cCan matcha/b/c,a/ab/c, but does not matcha/c/b/c
+?.jsCan matcha.js,a1.js,b2.js
+a??Can matcha.cc,acc, but does not matchacc/
+[abc].jscan only matcha.js,b.jsC.js, does not matchab.js,abc.jssuch as
+[^ab].jsCan matchd.js,e.jsAnd so on, can't matcha.js,b.js

Globs can also accept arrays, as shown in the following example:

　　[‘app/*.html‘,‘!app/a.html‘]: Matches all HTML under the app path, without the app subfolder, but excludes app/a.html.

　　[‘app/*.html‘,‘!app/a*.html‘]: Matches all HTML under the app path, without the app subfolder, but excludes HTML that starts with a in the app.

Globs also points out that it supports the notation of {} as a delimiter. The following are the examples of Li:

　　a{b,c}d: Expanded result is ABC, ACD

　　a{b,}c: Expanded result is AC, ABC

　　a{0..3}c : Expanded results are a0c, A1C, A2C, A3C

Gulp.dest (Path[,options])

The Gulp.dest () method is to generate a file

Path: generates the storage path; This path can only specify the directory where the file is generated, but cannot specify a file name.

Options: Optional Parameters

This method needs to be used in conjunction with the GULP.SRC () described above, and the simple process is generally:

(1), through the GULP.SRC () to obtain the file stream to be processed, through the pipeline Method pipe () into the Gulp plug-in;

(2), the plug-in processing after the end of the pipe () method to import into the gulp.dest ();

(3), gulp.dest () writes the file stream to the file.

Give me a chestnut:

1 var gulp=require (' Gulp '); 2 // -copy copy file 3 function () {4     gulp.src (' app/**/* '5         . Pipe (Gulp.dest (' dist/'));  Note This only specifies the directory where the makefile is generated, not the name of the specified build file 6 });

Gulp.watch (Glob[,options],tasks)

The Gulp.watch () method is to listen for file changes

Glob: File matching mode. Same as globs in Gulp.src ()

Options: Optional Parameters

Tasks: A task that needs to be performed after a file change is an array.

The following are the examples of Li:

1 var gulp=require (' Gulp '); 2 function () {3    console.log (' file changed!!! '4}); 5 gulp.watch (' app/index.html ', [' Test ']);

Gulp.watch () There is another way to use that:

Gulp.watch (Glob[,options,callback]);

This method can be used to monitor what has changed in the file. The following are the examples of Li:

1 varGulp=require (' Gulp ');2Gulp.watch (' app/index.html ',function(event) {3     varFile = {4Type:event.type,//-Change Type added-add deleted-delete changed-Modify5Path:event.path//-Change file path6     };7Console.log (' file changed '), file);8});

Summary:

First we understand the installation of gulp;

Need to install NODEJS environment, global installation use directive:NPM Install gulp-g

Installation of Gulp using the program:npm Install gulp--save-dev

Then create the gulpfile.js in the project root directory

The second is to learn gulp commonly used four methods, respectively:

The declaration defines the gulp.task () of the Gulp task;

Gets the GULP.SRC () of the file stream;

Generate the file gulp.dest ();

Monitor the change of File Gulp.watch ();

Gulp of the front-end building artifact