基本用法
gulp.src()
函数的基本用法非常简单,你只需要提供一个 glob(一种用于匹配文件路径的模式),就可以读取匹配到的文件。以下是一个简单的例子:
const { src, dest } = require('gulp');
function copyFiles() {
return src('src/**/*.js') // 读取 src 目录及其子目录下的所有 .js 文件
.pipe(dest('dist/')); // 将读取的文件写入到 dist 目录下
}
exports.copyFiles = copyFiles;
在这个例子中,src('src/**/*.js')
会读取 src
目录及其子目录下所有扩展名为 .js
的文件,并通过管道(pipe)将这些文件传递到 dest('dist/')
,后者会将文件写入到 dist
目录下。
参数
globs
gulp.src()
的主要参数是 globs,它可以是单个字符串或一个包含多个 globs 的数组。Globs 使用类似于 Unix shell 的路径匹配模式,例如 *
匹配任意数量的字符,**
匹配任意数量的目录层级,?
匹配单个字符等。
选项(Options)
除了 globs,gulp.src()
还接受一个可选的配置对象,用于定制其行为。以下是一些常用的选项:
- encoding:设置文件的编码。默认值为 “utf8”。如果设置为
false
,则文件内容被视为二进制数据。 - buffer:控制文件内容是否被缓冲到内存中。默认值为
true
。如果设置为false
,则文件的contents
属性将是一个流。 - read:控制文件是否被读取。默认值为
true
。如果设置为false
,则不会读取文件内容,且文件无法通过.dest()
写入磁盘。 - since:只处理自指定时间以来修改过的文件。可以是 Date 对象、时间戳或函数。
- removeBOM:控制是否从 UTF-8 编码的文件中移除字节顺序标记(BOM)。默认值为
true
。 - sourcemaps:启用源映射支持。可以是布尔值或函数,用于生成内联或外部源映射。
返回值
gulp.src()
返回一个流(stream),这个流包含了基于给定 globs 匹配到的文件所创建的 Vinyl 对象。你可以将这个流传递给其他 Gulp 插件或 Node.js 流处理函数进行进一步的处理。
错误处理
在使用 gulp.src()
时,需要注意几个可能的错误情况:
- 如果 globs 只能匹配一个文件,但没有找到匹配项,会抛出一个错误。要避免这个错误,可以将
allowEmpty
选项设置为true
。 - 如果提供了无效的 glob,也会抛出一个错误。
示例
以下是一个更复杂的示例,展示了如何使用 gulp.src()
的选项来定制文件读取行为:
const { src, dest } = require('gulp');
const babel = require('gulp-babel');
function transpileJS() {
return src('src/**/*.js', { sourcemaps: true, buffer: false })
.pipe(babel()) // 使用 Babel 转译 JavaScript
.pipe(dest('dist/', { sourcemaps: '.' })); // 将转译后的文件写入到 dist 目录,并生成外部源映射
}
exports.transpileJS = transpileJS;
在这个示例中,我们使用了 sourcemaps
选项来启用源映射支持,并将 buffer
选项设置为 false
以处理大文件而不将其内容缓冲到内存中。然后,我们使用 Babel 转译 JavaScript 文件,并将转译后的文件写入到 dist
目录,同时生成外部源映射文件。
通过深入理解 gulp.src()
函数及其选项,你可以更灵活地控制 Gulp 任务中的文件读取和处理过程,从而提高构建效率和可维护性。