【Gulp】处理文件

gulp 处理文件的过程是：src(glob) 获取文件流，pipe(plugin) 修改文件，pipe(dest(output)) 输出文件。

gulp 暴露了 src() 和 dest() 方法用于处理计算机上存放的文件。

src() 接受 glob（普通字符或通配符组成的字符串，用于匹配文件路径）组字符串或由多个 glob 字符串组成的数组作为参数，并从文件系统中读取文件然后生成一个 Node 流（stream）。

流（stream）所提供的主要的 API 是 .pipe() 方法，用于连接转换流（Transform streams）或可写流（Writable streams）。

dest() 接受一个输出目录作为参数，并且它还会产生一个 Node 流（stream），通常作为终止流（terminator stream）。

const { src, dest } = require("gulp");
const babel = require("gulp-babel");

exports.default = function () {
  return src("src/*.js").pipe(babel()).pipe(dest("output/"));
};

向流中添加文件

src() 也可以放在管道（pipeline）的中间，新加入的文件只可在后续的转换中修改。

如果 glob 匹配的文件与之前的有重复，仍然会再次添加文件。

const { src, dest } = require("gulp");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");

exports.default = function () {
  return src("src/*.js")
    .pipe(babel())
    .pipe(src("vendor/*.js"))
    .pipe(uglify())
    .pipe(dest("output/"));
};

分阶段输出

可以使用多个 dest() 进行多次输出。

此功能可用于在同一个管道（pipeline）中创建未压缩（unminified）和已压缩（minified）的文件。

const { src, dest } = require("gulp");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");

exports.default = function () {
  return src("src/*.js")
    .pipe(babel())
    .pipe(src("vendor/*.js"))
    .pipe(dest("output/"))
    .pipe(uglify())
    .pipe(rename({ extname: ".min.js" }))
    .pipe(dest("output/"));
};

插件

Gulp 插件实质上是 Node 转换流（Transform Streams），通常是放在 .pipe() 中。

可以用插件更改经过流（stream）的每个文件的文件名、元数据或文件内容。

每个插件应当只完成必要的工作。

条件插件

插件的操作不应该针对特定文件类型，可以使用像 gulp-if 之类的插件来判断是否使用插件。

const { src, dest } = require("gulp");
const gulpif = require("gulp-if");
const uglify = require("gulp-uglify");

function isJavaScript(file) {
  // 判断文件的扩展名是否是 '.js'
  return file.extname === ".js";
}

exports.default = function () {
  // 在同一个管道（pipeline）上处理 JavaScript 和 CSS 文件
  return (
    src(["src/*.js", "src/*.css"])
      // 只对 JavaScript 文件应用 gulp-uglify 插件
      .pipe(gulpif(isJavaScript, uglify()))
      .pipe(dest("output/"))
  );
};

模式

src() 可以工作在三种模式下：缓冲（buffering）、**流动（streaming）和空（empty）**模式。

• 缓冲（Buffering）模式是默认模式，将文件内容加载到内存中。

  插件通常运行在缓冲（buffering）模式下，并且许多插件不支持流动（streaming）模式。

• 流动（Streaming）模式的存在主要用于操作无法放入内存中的大文件，例如巨幅图像或电影。

  文件内容从文件系统中以小块的方式流式传输，而不是一次性全部加载。

  如果需要流动（streaming）模式，请查找支持此模式的插件或自己编写。

• 空（Empty）模式不包含任何内容，仅在处理文件元数据时有用。

参考

处理文件