tanaka's Programming Memo

プログラミングについてのメモ。

gulp+watchify+browserify+babel+reactでビルドが速くならない

watchifyでビルドの高速化を図ろうとしたところ、ビルドするたびに遅くなってしまいました。

原因は、Browserifyのオプションを指定していないことでした。以下、オプションとWatchifyとBrowserifyの部分の抜粋です。propsが必要でした。

var jsSrcPath = "./ビルドターゲットのパス/";
var jsSrcFile = "app.jsx";
var jsDestPath = "./出力先のパス/";

var bundler;
var props = {
    entries: jsSrcPath + jsSrcFile,
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: true
};
bundler = watchify( browserify( props ) );

function rebundle() {
    return bundler
        .transform(babelify, {presets:["react"]})
        .bundle()
        .on('error', $.util.log.bind($.util, 'Browserify Error'))
        .pipe( source('app.js') )
        .pipe(gulp.dest( jsDestPath ) );
}


gulpfile.jsの基本構造は以下のサイトを参考にしました。

Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境 – モンキーレンチ