【gulp】「gulp-」、「gulp.」で始まるプラグインをplugins.xxxxで利用する方法をメモメモ

gulp

2015.07.03

みなさま、こんにちは。

フジテレビのドラマ『ようこそ、わが家へ』が終わり残念がっていたら、
なんと7/6から（あと少し！）TBSで『花咲舞が黙ってない』の2ndシーズンが始まる！ということで、
夫婦揃って気もそぞろになってるkourakuです（『半沢直樹』以降池井戸作品に夢中なのです）。

さて、gulpでタスクと作っていると、プラグインを色々と試したり追加したりするので、
その都度requireで読み込んで変数に設定して・・・を繰り返して、
ちょっと手間に感じることがありますよね？（定義し忘れてエラーが出てムガーッ！となったり）

そんな時に、少し手間を省ける便利なプラグイン「gulp-load-plugins」の使い方を今回はメモメモ。

※前回までの記事を元に進めていきます。

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

今回紹介する「gulp-load-plugins」は、「gulp-」、「gulp.」で始まるプラグインについては、
毎回requireしなくても、インストールしたプラグインは「plugins.XXXXX」の形式で利用できる、
という優れものです。
では早速、次のコマンドを叩いて、gulp-load-pluginsをインストールします。

$ npm install gulp-load-plugins --save-dev

インストールが完了したら、gulpfile.coffeeの上部requireの箇所を次の様に書き換えましょう。

[gulpfile.coffee]
gulp = require 'gulp'

# gulp- 系のプラグインを plugins.xxxx で利用する(ハイフン付モジュール名はキャメルケース)
plugins = require('gulp-load-plugins')(
	pattern: [
		'gulp-*'
		'gulp.*'
	]
	replaceString: /\bgulp[\-.]/)

# gulp- 系以外のモジュール
plugins.browserSync = require 'browser-sync'
plugins.connectSSI = require 'connect-ssi'
  :

はい、これで一部プラグインの読込設定が簡単にできるようになりました。
ただし、「gulp-」、「gulp.」で始まるプラグイン以外は、通常通りrequireしないといけません。
変数の形式は、分かりやすくするために「plugins.XXXXX」で合わせるのが良いと思います。

これでインストールしたプラグインを使うために、次の様なコードの書き方ができるようになります。

[gulpfile.coffee]
  :
gulp.task 'browser-sync', ->
	plugins.browserSync.init
		server:
			baseDir: paths.pub
			middleware: [
				plugins.connectSSI(
					baseDir: __dirname + '/htdocs'
					ext: '.html'
				)
			]
  :
 gulp.task 'reload', ->
	plugins.browserSync.reload()
	return
  :
gulp.task 'ssiChangeVirtual', ->
	gulp
	.src paths.pub+'**/*.html'
	.pipe plugins.plumber()
	.pipe plugins.replace(/<!--#include file/g, '<!--#include virtual')
	.pipe gulp.dest paths.pub
	return
  :

いかがでしょうか。
これで、「gulp-」、「gulp.」で始まるプラグインはrequireを書く必要がなくなりましたね！
ひと手間省ける＆コードの先頭部分もこれで大分スッキリすると思います。

今回のサンプルデータ