Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

あとgulpfileの先頭の方がrequireだらけになって散らかってる感があるのもちょっとアレだったり、挙句の果てにはもう使用していないパッケージがpackage.jsonnode_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で動かないなどあればコメントに書いてもらえれば誰かが解決してくれるかもしれません(すっとぼけ)。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away