gulp.src复制整个文件夹或文件到指定目录（包括拷贝单个文件）

阳光穿透心脏的1/2处 2022-06-06 02:15 783阅读 0赞

#### 1、示例 ####

整个目录：

gulp.task('copy',  function() { 
      return gulp.src('src/**/*')
        .pipe(gulp.dest('dist'))
    });

gulp拷贝文件的时候如何保持路径?

效果：保留static/jquery/路径信息，即拷贝后的文件路径是 dist/static/jquery/jquery.js

1、在 gulp.src 加一个base选项，即 gulp.src(‘static/jquery/juqery.js’,\{ base: ‘.’ \}) 参考： [https://github.com/gulpjs/gulp/blob/master/docs/API.md\#optionsbase][https_github.com_gulpjs_gulp_blob_master_docs_API.md_optionsbase]

2、在src中使用通配符：static\*/jquery\*/jquery.js

参考：[http://cnodejs.org/topic/5516736ce26684ed7ff21e0f][http_cnodejs.org_topic_5516736ce26684ed7ff21e0f]

gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，这个我们暂时不用去深入理解，你只需简单的理解可以用这个方法来读取你需要操作的文件就行了。其语法为：

> gulp.src(globs\[, options\])

#### 2、globs参数 ####

`globs` 参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。  
`options`为可选参数。通常情况下我们不需要用到。

下面我们重点说说Gulp用到的glob的匹配规则以及一些文件匹配技巧。  
Gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：

<table> 
 <thead> 
  <tr> 
   <th align="left">pattern</th> 
   <th align="left">含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">*</td> 
   <td align="left">匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾</td> 
  </tr> 
  <tr> 
   <td align="left">**</td> 
   <td align="left">匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。</td> 
  </tr> 
  <tr> 
   <td align="left">?</td> 
   <td align="left">匹配文件路径中的一个字符(不会匹配路径分隔符)</td> 
  </tr> 
  <tr> 
   <td align="left">[…]</td> 
   <td align="left">匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法</td> 
  </tr> 
  <tr> 
   <td align="left">“{}”</td> 
   <td align="left">匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；</td> 
  </tr> 
  <tr> 
   <td align="left">!(pattern|pattern|pattern)</td> 
   <td align="left">匹配任何与括号中给定的任一模式都不匹配的</td> 
  </tr> 
  <tr> 
   <td align="left">?(pattern|pattern|pattern)</td> 
   <td align="left">匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)?</td> 
  </tr> 
  <tr> 
   <td align="left">+(pattern|pattern|pattern)</td> 
   <td align="left">匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+</td> 
  </tr> 
  <tr> 
   <td align="left">*(pattern|pattern|pattern)</td> 
   <td align="left">匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)*</td> 
  </tr> 
  <tr> 
   <td align="left">@(pattern|pattern|pattern)</td> 
   <td align="left">匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern)</td> 
  </tr> 
 </tbody> 
</table>

下面以一系列例子来加深理解

<table> 
 <thead> 
  <tr> 
   <th align="left">pattern</th> 
   <th align="left">示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">*</td> 
   <td align="left">能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js</td> 
  </tr> 
  <tr> 
   <td align="left">*.*</td> 
   <td align="left">能匹配 a.js,style.css,a.b,x.y</td> 
  </tr> 
  <tr> 
   <td align="left">*/*/*.js</td> 
   <td align="left">能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js</td> 
  </tr> 
  <tr> 
   <td align="left">**</td> 
   <td align="left">能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,在未尾时能用来匹配所有的目录和文件</td> 
  </tr> 
  <tr> 
   <td align="left">**/*.js</td> 
   <td align="left">能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js</td> 
  </tr> 
  <tr> 
   <td align="left">a/**/z</td> 
   <td align="left">能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z</td> 
  </tr> 
  <tr> 
   <td align="left">a/**b/z</td> 
   <td align="left">能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录</td> 
  </tr> 
  <tr> 
   <td align="left">?.js</td> 
   <td align="left">能匹配 a.js,b.js,c.js</td> 
  </tr> 
  <tr> 
   <td align="left">a??</td> 
   <td align="left">能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符</td> 
  </tr> 
  <tr> 
   <td align="left">[xyz].js</td> 
   <td align="left">只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符</td> 
  </tr> 
  <tr> 
   <td align="left">[^xyz].js</td> 
   <td align="left">能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js</td> 
  </tr> 
 </tbody> 
</table>

当有多种匹配模式时可以使用数组

使用数组的方式来匹配多种文件

> gulp.src(\[‘js/\*.js’, ‘css/\*.css’, ‘\*.html’\])

使用数组的方式还有一个好处就是可以很方便的使用排除模式，在数组中的单个匹配模式前加上!即是排除模式，它会在匹配的结果中排除这个匹配，要注意一点的是不能在数组中的第一个元素中使用排除模式

gulp.src(\[\*.js, ‘!b\*.js’\]) //匹配所有js文件，但排除掉以b开头的js文件  
gulp.src(\[‘!b\*.js’, \*.js\]) //不会排除任何文件，因为排除模式不能出现在数组的第一个元素中  
此外，还可以使用展开模式。展开模式以花括号作为定界符，根据它里面的内容，会展开为多个模式，最后匹配的结果为所有展开的模式相加起来得到的结果。展开的例子如下：

a\{b,c\}d 会展开为 abd,acd  
a\{b,\}c 会展开为 abc,ac  
a\{0..3\}d 会展开为 a0d,a1d,a2d,a3d  
a\{b,c\{d,e\}f\}g 会展开为 abg,acdfg,acefg  
a\{b,c\}d\{e,f\}g 会展开为 abdeg,acdeg,abdeg,abdfg

#### 3、options参数 ####

options： 类型(可选)：Object，有3个属性buffer、read、base；

*  options.buffer： 类型：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；
 *  options.read： 类型：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；
 *  options.base： 类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接，具体看下面示例：

[https_github.com_gulpjs_gulp_blob_master_docs_API.md_optionsbase]: https://github.com/gulpjs/gulp/blob/master/docs/API.md#optionsbase
[http_cnodejs.org_topic_5516736ce26684ed7ff21e0f]: http://cnodejs.org/topic/5516736ce26684ed7ff21e0f