使用插件

Gulp 插件是封装了常见行为的 Node 转换流，用于在管道中转换文件 - 通常使用 .pipe() 方法放置在 src() 和 dest() 之间。它们可以更改通过流的每个文件的文件名、元数据或内容。

可以在插件搜索页面上浏览和搜索使用 "gulpplugin" 和 "gulpfriendly" 关键字的 npm 插件。

每个插件应该只做少量工作，这样你可以像构建块一样连接它们。你可能需要组合多个插件才能达到预期效果。

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

exports.default = function() {
  return src('src/*.js')
    // gulp-uglify 插件不会更新文件名
    .pipe(uglify())
    // 所以使用 gulp-rename 来更改扩展名
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

你需要插件吗？

gulp 中并非所有操作都应该使用插件。插件是快速入门的方式，但使用模块或库通常可以改进许多操作。

const { rollup } = require('rollup');

// Rollup 的 Promise API 在 `async` 任务中工作得很好
exports.default = async function() {
  const bundle = await rollup({
    input: 'src/index.js'
  });

  return bundle.write({
    file: 'output/bundle.js',
    format: 'iife'
  });
}

插件应该始终用于转换文件。对于任何其他操作，请使用（非插件的）Node 模块或库。

const del = require('delete');

exports.default = function(cb) {
  // 直接使用 `delete` 模块，而不是使用 gulp-rimraf
  del(['output/*.js'], cb);
}

条件插件

由于插件操作不应该感知文件类型，你可能需要像 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() {
  // 在单个管道中包含 JavaScript 和 CSS 文件
  return src(['src/*.js', 'src/*.css'])
    // 仅将 gulp-uglify 插件应用于 JavaScript 文件
    .pipe(gulpif(isJavaScript, uglify()))
    .pipe(dest('output/'));
}

内联插件

内联插件是在你的 gulpfile 中通过编写所需行为来定义的一次性转换流。

在以下两种情况下，创建内联插件很有帮助：

• 替代创建和维护自己的插件。
• 替代为添加你想要的功能而分叉现有插件。

const { src, dest } = require('gulp');
const uglify = require('uglify-js');
const through2 = require('through2');

exports.default = function() {
  return src('src/*.js')
    // 你可以创建内联插件，而不是使用 gulp-uglify
    .pipe(through2.obj(function(file, _, cb) {
      if (file.isBuffer()) {
        const code = uglify.minify(file.contents.toString())
        file.contents = Buffer.from(code.code)
      }
      cb(null, file);
    }))
    .pipe(dest('output/'));
}