Browserify + Uglify2では、 依存関係にあるものをJavaScriptファイルへバンドルし、ソースマップを保持しながらUglifyJSを使用してminifyする基本的なgulpタスクの設定方法を説明しています。 ただし、これでは複数のファイルを入り口としたgulpとBrowserifyを使用する説明が出来ていないかもしれません。

参照: BrowserifyまたはUglifyを使用して、ストリーム内でエラーを処理したいのであれば、 エラー処理をストリームに繋げるのレシピを参照してください。

'use strict';

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var globby = require('globby');
var through = require('through2');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var reactify = require('reactify');

gulp.task('javascript', function () {
  // gulpはストリームが返されることを期待するので、ここにそれを作成
  var bundledStream = through();

  bundledStream
    // gulpプラグインが期待する正常な属性を含むストリームへ、
    // 出力バンドルストリームを変換
    .pipe(source('app.js'))
    // 残りのgulpタスクは、通常どおりに記述
    // Browserify + Uglify2のレシピからコピー
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
      // gulpプラグインをパイプラインのここに追加
      .pipe(uglify())
      .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/js/'));

  // "globby"は通常の"gulp.src"を、
  // Browserify自身が読み込み可能なストリームとして置換します。
  globby(['./entries/*.js'], function(err, entries) {
    // globbyのエラーをエラーとして確定させる
    if (err) {
      bundledStream.emit('error', err);
      return;
    }

    // Browserifyインスタンスを作成
    var b = browserify({
      entries: entries,
      debug: true,
      transform: [reactify]
    });

    // Browserifyストリームを、先に作成しておいたストリームにパイプ
    b.bundle().pipe(bundledStream);
  });

  // 最終的にストリームを返すため、gulpはこのタスクの完了を知ることが出来る
  return bundledStream;
});

 Back to top