gulp-load-pluginsでモジュール読み込みを省略しよう【gulp4】

html/css
この記事は約9分で読めます。
スポンサーリンク

はじめに

今回はgulp-load-pluginsでモジュール読み込みを省略する方法について説明していきます。

gulpのプラグインをたくさん導入するようになってくるとモジュール読み込みの宣言が大量になってしまいます。

そのような場合にgulp-load-pluginsを使用すると、モジュール読み込みの宣言を省略することができてコードの見通しが良くなります。

対象者
  • gulpに慣れてきた方
  • gulpのプラグインをたくさん導入している方

その他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-plugins

gulp-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",              // 上記に当てはまらないプラグインは個別指定
  ]
});

読み込み部分の大部分を削除することができてスッキリしましたね。

“pattern”オプション指定するとpackage.json に記載されたプラグインを自動で読み込んでくれるようになります。

スポンサーリンク

gulp-load-pluginsオプション

gulp-load-pluginsを使用するとモジュール読み込み部分がスッキリしましたね。

先ほどのpatternオプションの内容について以下にまとめておきます。

内容
gulp{-,.}「gulp-」や「gulp.」で始まるモジュール読み込みを省略できる
autoprefixer上記に当てはまらないプラグインは個別指定
browser-sync上記に当てはまらないプラグインは個別指定

「gulp-」や「gulp.」から始まらないプラグインについては、個別に指定しなければいけません。

個別指定となるプラグインについてはgulp-load-pluginsのメリットはあまり無いですね。

gulp-load-pluginsが設定できるオプションはいろいろありますが、patternオプションぐらいしか使いません。

スポンサーリンク

タスク処理部分を変更しよう

ここまでモジュール読み込み部分の変更点について説明してきました。

処理側の記述も一部変更点があります。

以下サンプルコードを例に差分を説明します。

変更前

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
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を導入するとコードの見通しがスッキリするのでぜひ導入してみてください。

コメント

タイトルとURLをコピーしました