Gulp .src() 匹配模式详解

古城微笑少年丶 2022-05-23 01:54 201阅读 0赞

*  语法：gulp.src(globs\[, options\])
 *  匹配模式
    
     *  单匹配模式
     *  多匹配模式（同时使用多种匹配）
        
         *  1. 类正则
         *  2. 数组
         *  3. 展开模式

# 语法：`gulp.src(globs[, options])` #

*  `globs`：文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)
 *  `options`：为可选参数。通常情况下我们不需要用到

gulp.src('**/*.js')

# 匹配模式 #

Gulp 内部使用了 node-glob 模块来实现其文件匹配功能

## 单匹配模式 ##

<table> 
 <tbody> 
  <tr> 
   <td>匹配符</td> 
   <td>code</td> 
   <td>匹配</td> 
   <td>不匹配</td> 
   <td>备注</td> 
  </tr> 
  <tr> 
   <td><code>*</code></td> 
   <td><code>*</code></td> 
   <td><code>a.b</code>， <code>x.y</code>， <code>abc</code>， <code>abc/</code></td> 
   <td><code>a/b.js</code></td> 
   <td>不匹配<code>/</code>，除非<code>/</code>出现在末尾</td> 
  </tr> 
  <tr> 
   <td><code>*.*</code></td> 
   <td><code>a.b</code>， <code>x.y</code></td> 
   <td><code>abc</code></td> 
   <td>匹配所有带后缀的文件</td> 
  </tr> 
  <tr> 
   <td><code>*/*/*.js</code></td> 
   <td><code>a/b/c.js</code>， <code>x/y/z.js</code></td> 
   <td><code>a/b.js</code>， <code>a/b/c/d.js</code></td> 
   <td>匹配固定层级目录</td> 
  </tr> 
  <tr> 
   <td><code>**</code></td> 
   <td><code>**</code></td> 
   <td><code>abc</code>， <code>a/b</code>， <code>a/b.js</code>， <code>a/b/c</code>， <code>a/b/c.js</code></td> 
   <td></td> 
   <td>匹配所有的目录和文件</td> 
  </tr> 
  <tr> 
   <td><code>**/*.js</code></td> 
   <td><code>a.js</code>， <code>a/b.js</code>， <code>a/b/c.js</code></td> 
   <td></td> 
   <td>匹配所有目录下的 <code>.js</code> 文件</td> 
  </tr> 
  <tr> 
   <td><code>a/**/z</code></td> 
   <td><code>a/z</code>， <code>a/b/z</code>， <code>a/b/c/z</code>， <code>a/b/c/d/z</code></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>a/**b/z</code></td> 
   <td><code>a/b/z</code>， <code>a/nb/z</code></td> 
   <td><code>a/c/nb/z</code>， <code></code></td> 
   <td><code>**</code> 单独出现才能匹配多级目录</td> 
  </tr> 
  <tr> 
   <td><code>?</code></td> 
   <td><code>?.js</code></td> 
   <td><code>a.js</code>， <code>b.js</code>， <code>c.js</code></td> 
   <td></td> 
   <td>占位符匹配，不匹配 <code>/</code></td> 
  </tr> 
  <tr> 
   <td><code>a??</code></td> 
   <td><code>a.b</code>， <code>abc</code></td> 
   <td><code>ab/</code></td> 
   <td>占位符与字符搭配使用</td> 
  </tr> 
  <tr> 
   <td><code>[]</code></td> 
   <td><code>[abc].js</code></td> 
   <td><code>a.js</code>， <code>b.js</code>， <code>c.js</code></td> 
   <td><code>ab.js</code>， <code>xyz.js</code></td> 
   <td>整个 <code>[]</code> 只匹配一个字符</td> 
  </tr> 
  <tr> 
   <td><code>[^abc].js</code><br><code>[!abc].js</code></td> 
   <td><code>x.js</code>， <code>y.js</code></td> 
   <td><code>a.js</code>， <code>b.js</code>， <code>c.js</code></td> 
   <td>排除匹配字符</td> 
  </tr> 
 </tbody> 
</table>

## 多匹配模式（同时使用多种匹配） ##

### 1. 类正则 ###

<table> 
 <thead> 
  <tr> 
   <th>表达式</th> 
   <th align="center">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>!(pattern|pattern|pattern)</code></td> 
   <td align="center">匹配任何与括号中给定的任一模式都不匹配的</td> 
  </tr> 
  <tr> 
   <td><code>?(pattern|pattern|pattern)</code></td> 
   <td align="center">匹配括号中给定的任一模式0次或1次，类似于js正则中的 <code>(pattern|pattern|pattern)?</code></td> 
  </tr> 
  <tr> 
   <td><code>+(pattern|pattern|pattern)</code></td> 
   <td align="center">匹配括号中给定的任一模式至少1次，类似于js正则中的 <code>(pattern|pattern|pattern)+</code></td> 
  </tr> 
  <tr> 
   <td><code>*(pattern|pattern|pattern)</code></td> 
   <td align="center">匹配括号中给定的任一模式0次或多次，类似于js正则中的 <code>(pattern|pattern|pattern)*</code></td> 
  </tr> 
  <tr> 
   <td><code>@(pattern|pattern|pattern)</code></td> 
   <td align="center">匹配括号中给定的任一模式1次，类似于js正则中的 <code>(pattern|pattern|pattern)</code></td> 
  </tr> 
 </tbody> 
</table>

### 2. 数组 ###

*  使用数组匹配多种模式

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

*  使用数组 + 排除模式  
    排除模式不能出现在数组的第一个元素中

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

### 3. 展开模式 ###

以 `{}` 作为定界符，根据它里面的内容，会展开为多个模式，  
最后匹配的结果为所有展开的模式相加起来得到的结果 !  
1. `a{b, c}d` 展开为：`abc`，`acd`  
2. `a{b,}c` 展开为：`abc`，`ac`  
3. `a{0..3}c` 展开为：`a0c`，`a1c`，`a2c`  
4. `a{b, c{d, e}f}g` 展开为：`abg`，`acdfg`，`acefg`  
5. `a{b, c}d{e, f}g` 展开为：`abdeg`，`acdeg`，`abdeg`，`abdfg`