使用插件#

¥Using Plugins

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

¥Gulp plugins are Node Transform Streams that encapsulate common behavior to transform files in a pipeline - often placed between src() and dest() using the .pipe() method. They can change the filename, metadata, or contents of every file that passes through the stream.

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

¥Plugins from npm - using the "gulpplugin" and "gulpfriendly" keywords - can be browsed and searched on the plugin search page.

每个插件应该只做少量的工作，因此你可以像构建块一样将它们连接起来。你可能需要将它们组合起来才能获得所需的结果。

¥Each plugin should only do a small amount of work, so you can connect them like building blocks. You may need to combine a bunch of them to get the desired result.

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

exports.default = function() {
  return src('src/*.js')
    // The gulp-uglify plugin won't update the filename
    .pipe(uglify())
    // So use gulp-rename to change the extension
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

你需要插件吗？#

¥Do you need a plugin?

并非 gulp 中的所有内容都应该使用插件。它们是一种快速入门方法，但许多操作可以通过使用模块或库来改进。

¥Not everything in gulp should use plugins. They are a quick way to get started, but many operations are improved by using a module or library instead.

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

// Rollup's promise API works great in an `async` task
exports.default = async function() {
  const bundle = await rollup({
    input: 'src/index.js'
  });

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

插件应该始终转换文件。使用（非插件）节点模块或库进行任何其他操作。

¥Plugins should always transform files. Use a (non-plugin) Node module or library for any other operations.

const del = require('delete');

exports.default = function(cb) {
  // Use the `delete` module directly, instead of using gulp-rimraf
  del(['output/*.js'], cb);
}

条件插件#

¥Conditional plugins

由于插件操作不应该识别文件类型，因此你可能需要像 gulp-if 这样的插件来转换文件子集。

¥Since plugin operations shouldn't be file-type-aware, you may need a plugin like gulp-if to transform subsets of files.

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

function isJavaScript(file) {
  // Check if file extension is '.js'
  return file.extname === '.js';
}

exports.default = function() {
  // Include JavaScript and CSS files in a single pipeline
  return src(['src/*.js', 'src/*.css'])
    // Only apply gulp-uglify plugin to JavaScript files
    .pipe(gulpif(isJavaScript, uglify()))
    .pipe(dest('output/'));
}

内联插件#

¥Inline plugins

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

¥Inline plugins are one-off Transform Streams you define inside your gulpfile by writing the desired behavior.

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

¥There are two situations where creating an inline plugin is helpful:

而不是创建和维护自己的插件。
¥Instead of creating and maintaining your own plugin.
而不是复刻现有的插件来添加你想要的功能。
¥Instead of forking a plugin that exists to add a feature you want.

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

exports.default = function() {
  return src('src/*.js')
    // Instead of using gulp-uglify, you can create an inline plugin
    .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/'));
}