gulp入门教程6:gulp.src

发布于:2024-11-04 ⋅ 阅读:(52) ⋅ 点赞:(0)

基本用法

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 任务中的文件读取和处理过程,从而提高构建效率和可维护性。