gulpのパッケージを管理しやすくするヘルパーモジュールを作成しました。 #JavaScript

gruntでもそうでしたが、gulpで新しいtaskを作るためにパッケージを追加しようとした場合に、いちいちnpm installしてgulpfileでrequire追加するのって面倒ですよね。

あとgulpfileの先頭の方がrequireだらけになって散らかってる感があるのもちょっとアレだったり、挙句の果てにはもう使用していないパッケージがpackage.jsonやnode_modulesに残ってるのを忘れて無駄に容量を食っていたり。

というわけでgulpのパッケージのロード、インストール、アンインストールをスマートに管理できるヘルパー的なモジュールを作成しました。

$ npm install gulp-packages

でインストールできます。

また、50行ほどの簡単なスクリプトですがソースをGitHubで公開しています。

提供している機能

1. ロード

通常はこんな感じにずらずらとrequireしていくわけですが、

通常

var gulp = require('gulp');
var less = require('gulp-less');
var coffee = require('gulp-coffee');
var pleeease = require('gulp-pleeease');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var coffeelint = require('gulp-coffeelint');
var concat = require('gulp-concat');

gulp-packagesを使うとこんな感じにスマートに書くことができます。

gulp-packages使用

var gulp = require('gulp');
var pkg = require('gulp-packages')(gulp, [
  'less',
  'coffee',
  'pleeease',
  'minifyCss',
  'uglify',
  'rename',
  'watch',
  'plumber',
  'coffeelint',
  'concat'
]);

上記の例だとpkg変数にロードしたパッケージが入っているので、task内でこんな感じに利用できます。

gulp.src('/path/to/*.coffee')
  .pipe(pkg.plumber())  // ←
  .pipe(pkg.coffee())   // ← pkg変数にロードされたパッケージを使用
  .pipe(pkg.uglify())   // ←
  .pipe(gulp.dest('js/'));

2. インストール

gulp-packagesをrequireすると'install'と'uninstall'というtaskがgulpに登録されます。

'install'タスクは、gulp-packagesに渡したパッケージの配列の中でまだインストールされていないものがあればまとめてnpm installしてくれる機能です。

例

var gulp = require('gulp');
var pkg = require('gulp-packages')(gulp, [
  'less',
  'coffee',
  'pleeease',
  'minifyCss',
  'uglify',      // ← まだインストールされていない
  'rename',      // ← まだインストールされていない
  'watch',
  'plumber',     // ← まだインストールされていない
  'coffeelint',
  'concat'       // ← まだインストールされていない
]);

こんな状態の時に

$ gulp install

を実行すると、

npm install gulp-uglify gulp-rename gulp-plumber gulp-concat --save-dev

を実行してくれます。

3. アンインストール

'uninstall'タスクは、gulp-packagesに渡したパッケージ配列にないものがインストールされている場合にまとめてnpm uninstallを実行してくれる機能です。

例

var gulp = require('gulp');
var pkg = require('gulp-packages')(gulp, [
  'less',
  'coffee',
  'pleeease',
  'minifyCss',
  'watch',
  'coffeelint',
]);

package.json

{
  "devDependencies": {
    "coffee-script": "*",
    "gulp": "*",
    "gulp-coffee": "^2.1.1",
    "gulp-coffeelint": "^0.3.3",
    "gulp-concat": "^2.3.4",      ← もう使ってない
    "gulp-less": "^1.3.2",
    "gulp-minify-css": "^0.3.7",
    "gulp-pleeease": "0.0.5",
    "gulp-plumber": "^0.6.4",     ← もう使ってない
    "gulp-rename": "^1.2.0",      ← もう使ってない
    "gulp-uglify": "^0.3.1",      ← もう使ってない
    "gulp-watch": "^0.6.8"
  }
}

こんな状態の時に

$ gulp uninstall

を実行すると

npm uninstall gulp-uglify gulp-rename gulp-plumber gulp-concat --save-dev

を実行してくれます。

仕様

1: gulp-packagesの使い方はサンプルの通りです。

var pkg = require('gulp-packages')(gulp, [ パッケージ名の配列 ]);
第1引数にgulpオブジェクト、第2引数にパッケージ名の配列を指定します。

2: パッケージ名はnpmで提供されている名称から先頭のgulp-を除外してキャメルケースに変換した形で指定します。

例1: gulp-uglifyをロードする場合はuglifyと書く
例2: gulp-minify-cssをロードする場合はminifyCssと書く

3: 上記2で指定したパッケージ名がgulp-packagesでのパッケージロードの戻り値である変数に登録されるので、その変数を通してパッケージの機能を利用します。

4: あまり関係ないですが、gulp-packagesでパッケージをロードすると、gulp変数に_packagesプロパティが登録されます。

まとめ

動作確認はubuntuでしか行なっていないので他のOSで動かないなどあればコメントに書いてもらえれば誰かが解決してくれるかもしれません(すっとぼけ)。