Gulp globs matching rules

In this section, we will learn the matching rules of Gulp in globs glob is a string composed of ordinary characters or wildcard characters, used to match file paths. We can use one or more glob matching rules to locate files in the file system.

gulp.src() method

src() method requires a glob string or an glob strings as parameters to determine which files need to be operated.

gulp.src(globs[, options])

• globs : File matching mode, similar to regular expressions, used to match file paths.
• options : optional parameters, usually do not need to be used.

Example:

gulp.src('./js/*.js')                        // * 匹配js文件夹下所有.js格式的文件
gulp.src('./js/**/*.js')                     // ** 匹配js文件夹的0个或多个子文件夹
gulp.src(['./js/*.js','!./js/index.js'])     // ! 匹配除了index.js之外的所有js文件
gulp.src('./js/**/{omui,common}.js')         // {} 匹配{}里的文件名

Match mode

gulp internally uses the node-glob module to realize its file matching function. We can use the following special characters to match the files we want.

Single match mode:

Match	description
*	Match 0 or more characters in the file path, but will not match the path separator unless the path separator appears at the end
**	Match 0 or more directories and their subdirectories in the path
？	Match any one of the characters appearing in the square brackets
[...]	Match any one of the characters appearing in the square brackets

Multi-matching mode, using multiple matches at the same time:

expression	description
!(pattern\	pattern\	pattern)	Matches anything that does not match any of the patterns given in the parentheses
?(pattern\	pattern\	pattern)	Match any pattern given in brackets 0 or 1 times
+(pattern\	pattern\	pattern)	Match any pattern given in parentheses at least once
*(pattern\	pattern\	pattern)	Match any pattern given in parentheses 0 or more times
@(pattern\	pattern\	pattern)	Match any pattern given in parentheses once

Array

If there are multiple matching patterns, we can use an array src()

• Use arrays to match multiple files. For example, the following code matches js , css , html three files:

gulp.src(['js/*.js', 'css/*.css', '*.html'])

• Another advantage of using the array method is that you can easily use the exclusion mode. Adding the ! symbol before the single matching mode in the array is the exclusion mode. It will exclude the match in the matching result. Please pay attention to it. It is not possible to use the exclude pattern in the first element in the array

gulp.src([*.js,'!b*.js']) // 匹配所有js文件，但排除掉以b开头的js文件
gulp.src(['!b*.js',*.js]) // 不排除任何文件，因为排除模式不能出现在数组的第一个元素中

In addition, you can also use the expanded mode. The expansion pattern uses curly braces {} as the delimiter. According to the content in it, it expands into multiple patterns, and the final matching result is the result of adding up all the expanded patterns.

The expanded example is as follows:

• a{b,c}d : Will expand to abd , acd .
• a{b,}c : Will expand to abc , ac .
• a{0..3}d : Will expand to a0d , a1d , a2d , a3d .
• a{b,c{d,e}f}g : Will expand to abg , acdfg , acefg .
• a{b,c}d{e,f}g : Will expand to abdeg , acdeg , abdeg , abdfg .

String fragments and separators

A string fragment refers to a string composed of all the characters between two separators. In globs , the separator is always / operating system, even in Windows operating system that \\ as the separator. . In globs , the \\ character is reserved as an escape character.

Example:

If the * symbol is escaped, then * will be used as an ordinary character instead of a wildcard:

'glob_with_uncommon_\\*_character.js'

Avoid using Node of path to create globs , such as path.join .

In Windows , because Node uses \\ characters as the path separator, an invalid globs will be generated. Also avoid using __dirname and __filename global variables. For the same reason, avoid using the process.cwd()

const invalidGlob = path.join(__dirname, 'src/*.js');