gulpパッケージの一括ロード

gulpで定形処理をタスク化していくと、スクリプトファイルには大量のrequireが並ぶことになります.

これを解消するのがgulp-load-plugins. 公式サイト
package.jsonに書かれたgulp-xxxパッケージを、一括ロードすることができます.

別記事のgulpタスクの分割と併用すれば、グッとスクリプトファイルの見通しが良くなります.

---

記事を書くにあたり、動作するスクリプトファイルを編集して紹介しています.
万が一動作しない場合は、こちらのソースコードを参照してください.

インストール

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

gulpタスク

gulp-load-pluginsを利用しない場合

タスクで必要なパッケージをすべてrequireします.
パッケージを割り当てる変数の名前も考えなければいけません.

var gulp = require('gulp');
var gulp_if = require('gulp-if');
var gulp_uglify = require('gulp-uglify');
var gulp_minify_css = require('gulp-minify-css');
var gulp_cache = require('gulp-cache');
var gulp_imagemin = require('gulp-imagemin');
var gulp_util = require('gulp-util');

gulp.task('copy', function() {
    return gulp.src(['src/**/*'
              ,'!' + 'src/**/*-sample'
              ,'!' + 'src/lib/**'])
        .pipe(gulp_if('*.js', gulp_uglify().on('error', gulp_util.log)))
        .pipe(gulp_if('*.css', gulp_minify_css().on('error', gulp_util.log)))
        .pipe(gulp_if('*.png', gulp_cache(gulp_imagemin().on('error', gulp_util.log))))
        .pipe(gulp.dest('target'));
});

gulp-load-pluginsを利用する場合

package.jsonに書かれたgulp-xxxパッケージを一括ロードして、$に割り当てています.
require文の末尾の()で、gulp-load-plugins自体を評価していることに注意してください.

以降は、$.minifyCssのような形式でパッケージを利用できます.

デフォルト設定では、パッケージの名前から'gulp-'が削除され、残りの部分をキャメルケースにした名前で$に割り当てられます.
設定を変更する場合はこちらを参照してください.

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('copy', function() {
    return gulp.src(['src/**/*'
              ,'!' + 'src/**/*-sample'
              ,'!' + 'src/lib/**'])
        .pipe($.if('*.js', $.uglify().on('error', $.util.log)))
        .pipe($.if('*.css', $.minifyCss().on('error', $.util.log)))
        .pipe($.if('*.png', $.cache($.imagemin().on('error', $.util.log))))
        .pipe(gulp.dest('target'));
});