はじめに
今回はgulp-load-pluginsでモジュール読み込みを省略する方法について説明していきます。
gulpのプラグインをたくさん導入するようになってくるとモジュール読み込みの宣言が大量になってしまいます。
そのような場合にgulp-load-pluginsを使用すると、モジュール読み込みの宣言を省略することができてコードの見通しが良くなります。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではgulp-load-pluginsの使用する方法に移ります。
目的
gulpを使い慣れてきていろんなプラグインを入れるようになるとモジュール読み込み宣言(require(“”))を大量に記述しないといけません。
以下のような記述です。
const sass = require("gulp-sass");
const plumber = require("gulp-sass-glob");
const plumber = require("gulp-plumber");
// ・
// ・ (その他大量読み込み)
// ・
const autoprefixer = require("autoprefixer");
const browserSync = require("browser-sync");上記のようになると宣言部分だけでコードを圧迫してしまい、なんだか見通しが悪くなってしまいますよね。
このような場合にgulp-load-puguinsを使用すると、先ほど記載した読み込み部分の記述をほぼ省略することができます。
実際にどのようになるか説明していきます。
gulp-load-pluginsをインストールしよう
まずはgulp-load-pluginsをインストールしていきましょう。
npm i -D gulp-load-plugins
下記コマンドをターミナルで実行してgulp-load-pluginsをインストールします。
npm i -D gulp-load-pluginsgulp-load-plugins 公式
モジュール読み込み部分を変更しよう
プラグインのインストールが完了しました。
それではgulpfile.jsのモジュール読み込み部分を変更していきましょう。
変更前
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");
const sass = require("gulp-sass");
const sasGlob = require("gulp-sass-glob");
const plumber = require("gulp-plumber");
// ・
// ・ (その他大量読み込み)
// ・
const autoprefixer = require("autoprefixer");
const browserSync = require("browser-sync");変更後
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch, tree } = require("gulp");
// モジュール読み込み部分全削除
const $ = require("gulp-load-plugins")({
pattern:[
"gulp{-,.}*", // 「gulp-」や「gulp.」で始まるモジュール読み込みを省略できる
"autoprefixer", // 上記に当てはまらないプラグインは個別指定
"browser-sync", // 上記に当てはまらないプラグインは個別指定
]
});読み込み部分の大部分を削除することができてスッキリしましたね。
gulp-load-pluginsオプション
gulp-load-pluginsを使用するとモジュール読み込み部分がスッキリしましたね。
先ほどのpatternオプションの内容について以下にまとめておきます。
| 値 | 内容 |
| gulp{-,.} | 「gulp-」や「gulp.」で始まるモジュール読み込みを省略できる |
| autoprefixer | 上記に当てはまらないプラグインは個別指定 |
| browser-sync | 上記に当てはまらないプラグインは個別指定 |
「gulp-」や「gulp.」から始まらないプラグインについては、個別に指定しなければいけません。
個別指定となるプラグインについてはgulp-load-pluginsのメリットはあまり無いですね。
タスク処理部分を変更しよう
ここまでモジュール読み込み部分の変更点について説明してきました。
処理側の記述も一部変更点があります。
以下サンプルコードを例に差分を説明します。
変更前
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function css(done){
src("./src/scss/**/*.scss")
.pipe(plumber())
.pipe(sassGlob())
.pipe(sass())
.pipe(
postcss([
autoprefixer({
cascade: false,
}),
])
)
.pipe(dest("./src/css"));
done();
}
function bs(done){
browserSync({
server: {
baseDir: "./src/"
},
files:"./src/**",
});
done();
}変更後
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function css(done){
src("./src/scss/**/*.scss")
.pipe($.plumber()) // 変更
.pipe($.sassGlob()) // 変更
.pipe($.sass()) // 変更
.pipe(
$.postcss([ // 変更
$.autoprefixer({ // 変更
cascade: false,
}),
])
)
.pipe(dest("./src/css"));
done();
}
function bs(done){
$.browserSync({ // 変更
server: {
baseDir: "./src/"
},
files:"./src/**",
});
done();
}変更箇所はプラグインの使用部分のみですね。
使用するプラグインの先頭部分にgulp-load-pluginsの変数名を付けてあげればいいだけです。
ここではgulp-load-pluginsの変数名を$ としています。
使用プラグインの命名規則
タスク処理部分の変更点について説明しました。
gulp-load-pluginsの変数名の後に使用するプラグインの命名には決まりがあります。
変数名を$ として命名規則をまとめます。
| プラグイン名(例) | gulp-load-plugins使用時記述 | 備考 |
| gulp-abc | $.abc | 「gulp-」を省略可 |
| gulp-abc-def | $.abcDef | 「gulp-」を省略可 「gulp-」以降のハイフンは削除して先頭部分を大文字にする |
| abcdef | $.abcdef | 「gulp-」が無い場合はそのまま |
おわりに
以上gulp-load-pluginsでモジュール読み込みを省略する方法について説明しました。
いかがだったでしょうか。
gulpのプラグインをたくさん導入している方はgulp-load-pluginsを導入するとコードの見通しがスッキリするのでぜひ導入してみてください。
コメント