gulp-load-pluginsを使ってプラグインの読み込みを簡素化する

gulp-load-pluginsを使ってプラグインの読み込みを簡素化する

gulpはプラグインを使うことで様々なタスクを作ることができますが、その分プラグインを読み込むために沢山の`require()`を記述していく必要があります。タスクファイルを分割している場合はあまり気にならないかもしれませんが、`gulpfile.js`のみ使用していて長くなってしまうのが嫌だとか単純に何度も`require()`を記述するのが面倒だというときは、「gulp-load-plugins」というプラグインを利用することでプラグインの読み込みを簡素化することができます。

gulp-load-pluginsのインストール

早速「gulp-load-plugins」の使用例を紹介していきます。
「gulp」は既にインストール済みという想定で、まずは下記をコマンドに入力して「gulp-load-plugins」プラグインをインストールします。

$ npm i -D gulp-load-plugins

$ npm install gulp-load-plugins --save-devでも可。

タスクの記述

次に実際にタスクに記述していきますが、今回はサンプルとして下記のようなCSS関連のタスクが記述されているgulpfile.jsを用意し、ここに「gulp-load-plugins」を使ってみる形で紹介していきます。

gulpfile.js

var gulp = require( 'gulp' ),
    autoprefixer = require( 'autoprefixer' ),
    sass = require( 'gulp-sass' ),
    postcss  = require( 'gulp-postcss' ),
    plumber = require( 'gulp-plumber' ),
    notify = require( 'gulp-notify' );

gulp.task('css', function() {
  return gulp.src('./src/scss/**/*.scss')
      .pipe(plumber({errorHandler:notify.onError('Error: <%= error.message %>')}))
      .pipe(sass())
      .pipe(postcss([ autoprefixer() ]))
      .pipe(gulp.dest('./public/css/'));
});

上記コードを見るとsass = require( 'gulp-sass' )plumber = require( 'gulp-plumber' )のように、複数のプラグインを読み込むためにrequire()がいくつか記述されているのがわかりますが、ここに「gulp-load-plugins」を使うことでこれらrequire()の記述を簡素化することができます。

実際に使ってみたのが下記のコードで、赤文字表記している部分が先ほどとの変更箇所となります。

gulpfile.js

var gulp = require( 'gulp' ),
    autoprefixer = require( 'autoprefixer' ),
    plugins = require('gulp-load-plugins')();

gulp.task('css', function() {
  return gulp.src('./src/scss/**/*.scss')
      .pipe(plugins.plumber({errorHandler:plugins.notify.onError('Error: <%= error.message %>')}))
      .pipe(plugins.sass())
      .pipe(plugins.postcss([ autoprefixer() ]))
      .pipe(gulp.dest('./public/css/'));
});

「gulp-load-plugins」を使うと上記のようにもともと4行分記述していたrequire()plugins = require('gulp-load-plugins')();という1行のみの記述でよくなり、これでパッと見は読み込みの記述がされていない「gulp-sass」「gulp-postcss」「gulp-plumber」「gulp-notify」の4つのプラグインを実は読み込んでいます。

自動で読み込まれるのはpackage.jsonに書かれた「gulp-」や「gulp.」から始まるプラグインとなるので、例えば今回のサンプルで使用している「autoprefixer」に関しては対象外となるので、いつも通り読み込む必要があります。
また、サンプルコードでは変数をpluginsとしていますが、これは自分がわかりやすい任意のものに変更可能で、その際はタスク内に記述している各変数の記述も変更してください。

以上、gulpでプラグインの読み込みを簡素化できる「gulp-load-plugins」の紹介でした。
ここで紹介したサンプルだともともとが4つしかなかったのでそこまでスッキリした感じはしませんが、ひとつのファイルにズラッとタスクを記述していて十個以上のプラグインを読み込んでいる状態とかで試しに使ってみるとかなりスッキリさせることができると思います。
また、「gulp-」や「gulp.」から始まるプラグインだけですが、毎回require()を書くのが面倒だという人にもおすすめです。

プラグインの詳細などについては、以下で確認できます。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。