プラグインの使用#

Gulpプラグインは、パイプラインでファイルを変換するための一般的な動作をカプセル化したNode Transform Streamsです。通常、.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) {
// gulp-rimrafの代わりに、`delete`モジュールを直接使用します
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/'));
}

インラインプラグイン#

インラインプラグインは、必要な動作を記述することでgulpファイル内で定義する使い捨てのTransform Streamです。

インラインプラグインの作成が役立つ状況は2つあります。

  • 独自のプラグインを作成および保守する代わりに。
  • 必要な機能を追加するために既存のプラグインをフォークする代わりに。
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/'));
}