Corredor

ウェブ、プログラミングの勉強メモ。

Gulp-Load-Plugins は Pattern 指定できる

フロントエンド開発徹底攻略 (WEB+DB PRESS plus)

フロントエンド開発徹底攻略 (WEB+DB PRESS plus)

  • 作者: cho45(さとう),五十嵐啓人,伊野亘輝,須藤耕平,片山育美,池田拓司,高津戸壮,石本光司,竹迫良範,伊藤直也,若原祥正,沢渡真雪
  • 出版社/メーカー: 技術評論社
  • 発売日: 2014/07/16
  • メディア: 大型本
  • この商品を含むブログ (1件) を見る

Gulp-Load-Plugins は、gulp-* で始まる Gulp 関連パッケージを一括で読み込んでくれる。例えば gulp-inject なら $.inject()、gulp-angular-filesort なら $.angularFilesort() となる。先頭の gulp- を省いて、ハイフンケース部分はキャメルケースに直した名前になる。

さて、このプラグイン、gulp- で始まらないパッケージも読み込めることに気が付いたので紹介。

const gulp = require('gulp');

// これまでこう書いていた
// const $ = require('gulp-load-plugins')();

// gulp-* 以外に追加したいパッケージ名を列挙していけば OK
const $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'browserify', 'del', 'run-sequence', 'vinyl-source-stream']
});

// gulp- 始まりのパッケージはこれまでどおり
$.inject();

// del パッケージはこんな感じに呼び出せる
$.del();
// Run-Sequence も使える (ハイフンケースはキャメルケースに直す)
$.runSequence();
// Browserify・Vinyl-Source-Stream もこのとおり
$.browserify().bundle().pipe($.vinylSourceStream())

Gulp-Load-Plugins のオプションに pattern というモノがあり、ココに読み込みたいパッケージを列挙していけば良かった。

先頭の gulp-* は記載しておかないと gulp- 始まりのパッケージが読み込めなくなるので注意。

これでだいぶ require() がスッキリする…。