Browserifyは重要で欠かすことの出来ないツールになりましたが、 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 uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');

gulp.task('javascript', function () {
  // タスク上にBrowserifyインスタンスをセットアップ
  var b = browserify({
    entries: './entry.js',
    debug: true
  });

  return b.bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
        // パイプラインのここに変換タスクを追加
        .pipe(uglify())
        .on('error', gutil.log)
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist/js/'));
});

 Back to top