使用插件

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

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

每个��件应该只做少量工作，因此您可以像搭积木一样连接它们。您可能需要组合一堆插件才能获得所需的结果。

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())

// 所以使用gulp-rename来更改扩展名

.pipe(rename({ extname: '.min.js' }))

.pipe(dest('output/'));

}

您需要插件吗？

不是所有gulp中的操作都需要使用插件。它们是快速入门的方式，但许多操作通过使用模块或库来改进。

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

// Rollup 的 Promise API 在异步任务中运行良好

exports.default = async function()

const bundle = await rollup(

input: 'src/index.js'

});

return bundle.write(

file: 'output/bundle.js',

格式: 'iife'

});

}

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

const del = require('delete');

导出.默认 = 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中编写的一次性Transform Streams，用于定义所需的行为。

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

• 而不是创建和维护自己的插件。
• 而不是分叉现有的插件以添加您想要的功能。

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())

文件.内容 = 缓冲区.从(代码.代码)

}

cb(null, 文件);

}))

.pipe(dest('output/'));

}