In-depth understanding of gulp automation

write in front

Http://jafeney.com/2016/03/06/2016-03-06-gulp/gulp used it for a while, and several of the company's projects were built with automation. But for this simple and crude tool, I often love and fear. What do you mean. Daniel wrote the gulp task I understand, but also can leaf out apply to their own projects, but if you leave Doc, let me write myself I really do not write well. Paper on the end of shallow ah, test the mastery of a technology, light to understand, will apply or stay in the shallow layer, on the basis of understanding of their own can write beautiful and efficient code that is really mastered. Detailed Gulp API

To run the Gulp task, simply switch to the directory where the Gulpfile.js file is located (Windows platforms use a tool such as CMD or power shell), and then execute the Gulp command on the command line, followed by the task name to be executed, gulp, for example Gulp Task1, if you do not specify a task name, the default task with the task named default is executed.

With gulp, you only need to know 4 APIs: Gulp.task (), GULP.SRC (), Gulp.dest (), Gulp.watch (), so it's easy to master, but there are a few places you need to understand thoroughly. Look down ... gulp.src ()

Gets the file stream. Note that the content in this stream is not the original file stream, but rather a virtual file object stream (Vinyl files), which stores the path, file name, content, and other information of the original file, with the basic syntax:

1	GULP.SRC ([globs],options)

The globs parameter is a file-matching pattern (similar to a regular expression), used to match the file path (including the file name) and, of course, to specify a specific file path directly. When there are multiple matching patterns, the parameter can be an array.
Options is an optional parameter. Normally we don't need to use it.

The following focuses on gulp commonly used glob matching rules and tricks: * matches 0 or more characters in the file path, but does not match the path delimiter, unless the path delimiter appears at the end * * * match the path of 0 or more directories and their subdirectories, it needs to appear separately, that is, there is no other things around it. If it appears at the end, it can also match the file. Match one of the characters in the file path (does not match the path delimiter) [...] matches any of the characters that appear in the square brackets, when the first character in the square brackets is ^ or!, it means that it does not match any of the other characters appearing in the square brackets, similar to the usage in the JS regular expression! (Pattern|pattern|pattern) match any of the patterns given in parentheses that do not match? (Pattern|pattern|pattern) matches any pattern given in parentheses 0 or 1 times, similar to the one in JS Regular (Pattern|pattern|pattern)? + (Pattern|pattern|pattern) matches any pattern given in parentheses at least 1 times, similar to JS Regular (Pattern|pattern|pattern) + * (Pattern|pattern|pattern) Match any pattern given in parentheses 0 or more times, similar to the JS regular (Pattern|pattern|pattern) * @ (Pattern|pattern|pattern) matches any given pattern in parentheses 1 times, similar to JS regular ( Pattern|pattern|pattern)

The syntax looks too dull, we still have the actual scene to see: * Can match a.js, X.Y, ABC, abc/, but can not match a/b.js * * can match a.js, style.css, a.b,x.y */*/*.js can match a/b/c.js, x/y/ Z.js, cannot match a/b.js, A/b/c/d.js * * can match ABC, a/b.js, A/b/c.js, x/y/z, x/y/z/a.b, can be used to match all directories and files **/*.js can match foo.js, a/foo.js, A/b /foo.js, A/b/c/foo.js a/**/z can match a/z, a/b/z, a/b/c/z, a/d/g/h/j/k/z a/**b/z can match a/b/z, a/sb/z, but cannot match a/x/sb/z, because only single * * Appears to be Match multi-level catalogs? JS can match a.js, B.js, c.js a?? Can match A.B, ABC, but cannot match ab/, because it does not match the path delimiter [xyz].js only matches x.js, Y.js, Z.js, does not match xy.js, xyz.js, etc., the entire bracket represents only one character [^xyz].js can match a.js, B.J s, c.js, etc., cannot match x.js, Y.js, z.js

Arrays can be used when there are multiple matching patterns:

1	GULP.SRC ([' Js/*.js ', ' css/*.css ', ' *.html '])

An advantage of using an array is that it is easy to use an exclusion pattern, plus a single matching pattern in the array! That is, the exclusion pattern, which excludes the match from the matching results, and note that the exclusion pattern cannot be used in the first element of the array.

1 2	GULP.SRC ([*.js, '!b*.js '])//Match all JS files, but exclude the JS file starting with B gulp.src (['!b*.js ', *.js])//will not exclude any files, Because exclusion mode cannot appear in the first element of an array

In addition, you can use the expand mode. The expansion pattern is the curly brace as a delimiter, depending on what is inside it, expands into multiple patterns, and the result of the last match is the result of adding all the expanded patterns together. The following are examples of expansion: A{b,c}d will be expanded to Abd, and ACD A{b,}c will be expanded to