gulp.jsでreactjsのuglifyでエラー出たときの対応

gulp.jsでreact.jsで書いたものを圧縮しようとしたときにエラーが出たときの対応です。

まず以下のようなgulpfile.jsを書きました。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require("vinyl-source-stream");
var reactify = require('reactify');
var watchify = require('watchify');
var sass = require('gulp-sass');
var buffer = require('vinyl-buffer');
var plumber = require('gulp-plumber');
var uglify = require('gulp-uglify');
 
gulp.task('browserify', function(){
  var b = browserify({
    entries: ['./src/test.jsx'],
    transform: [reactify]
  });
  return b.bundle()
    .pipe(source('test.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dist'));
});

それをbrowserifyしてみたところ、エラーになりました。

$ gulp browserify
[10:26:15] Using gulpfile ~/Documents/github/test/gulpfile.js
[10:26:15] Starting 'browserify'...
 
events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: /Users/xxxx/Documents/github/test/test.js: Streaming not supported

調べたところ、gulp-streamifyを使うとよいようです。

・インストール
$ npm install --save-dev gulp-streamify
 
・requireを追加
var streamify = require('gulp-streamify');

・uglify()をstreamify(uglify())に変更
gulp.task('browserify', function(){
  var b = browserify({
    entries: ['./src/test.jsx'],
    transform: [reactify]
  });
  return b.bundle()
    .pipe(source('test.js'))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('./dist'));
});

修正して実行したらエラー出ませんでした。

$ gulp browserify
[10:29:52] Using gulpfile ~/Documents/github/test/gulpfile.js
[10:29:52] Starting 'browserify'...
[10:29:56] Finished 'browserify' after 3.85 s

参考URL
http://yebisupress.dac.co.jp/2015/02/26/gulp-js%E3%81%A7%E5%BA%83%E5%91%8A%E3%82%BF%E3%82%B0%E3%81%AE%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E6%95%B4%E3%81%88%E3%82%8B/
https://github.com/hughsk/vinyl-source-stream/issues/1