当前位置: 首页 > 工具软件 > Gulp.js > 使用案例 >

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

公孙棋
2023-12-01

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

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

参考:http://cnodejs.org/topic/5516736ce26684ed7ff21e0f

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

gulp.src(globs[, options])

2、globs参数

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

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

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

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

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

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

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

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 设置输出路径以某个路径的某个组成部分为基础向后拼接,具体看下面示例:
 类似资料: