gulpのタスクを改良してみた（自動化編）

最近React.jsのTodoアプリを作成していて、大変不便を感じていたことをgulpで自動化してみた。

※ 今回もgulp.babel.jsで書いてます。

不便だったこと

• javascriptのコンパイル
• ブラウザのリロード(F5)

npmで追加したパッケージ

• watchify
• browser-sync

タスク

gulpで下記についてタスクを作成しました。

• コンパイル前のES6で記述しているjsファイルを監視し、更新時に自動的コンパイル
• コンパイル後のjsファイルを監視し、更新時にブラウザを自動更新

ES6で記述しているjsファイルを監視し
更新時に自動的コンパイル

私は主にapp.jsを書いていて、毎回ビルドしていて面倒でした。
その改良として、自由に自動化、非自動化出来るようにタスク作成してみました。

ポイントとしては、isWatchを判定したif文内部となります。
callbackを設定して、ファイルがupdateされたタイミングでコンパイルを行います。

--- gulp.bable.js
let compile = (isWatch) => {
        let bundler = browserify('./src/js/app.js', { debug: true }).transform(babelify);

        if (isWatch) {
          bundler = watchify(bundler);
                bundler.on('update', () => {
                        console.log('-> rebundling.');
                        rebundle();
                });
        } 
        rebundle();

        function rebundle() {
                bundler
                .bundle()
                .on('error', (err) => {
                        console.log("Error: " + err.message);
                })
                .pipe(source('bundle.js'))
                .pipe(gulp.dest('./src/js'))
        }
};

gulp.task('watch', () => {
        compile(true);
});

コンパイル後のjsファイルを監視し
更新時にブラウザを自動更新

今までjsファイルを編集してから毎回ブラウザを更新していたんですが
キャッシュが残っていたりで凄くストレスの要因でした。

この問題をbrowser-syncを使って自動化しました。

内容は、コンパイル後のbundle.jsを監視し、更新されたタイミングで
ブラウザを更新するようにしました。

gulp.task('browser-sync', () => {
        browserSync({
                server: {
                        baseDir: "src"
                }
        })

        gulp.watch("./src/js/bundle.js", () => {
                browserSync.reload();
        });
});

後は作成した２つのタスクをまとめてあげれば完了です。

gulp.task('default', ['browser-sync', 'watch']);

$ gulp

やってみて

やっぱり自動化すごいなって感じます。
コーディングに集中できるし、面倒なことを考える必要がないって改めて
推進していくべきですよね。
確かに初期工数はかかりますが、精神的ストレスを消せるから全体的に考えればストレスフリーですね。

一点、なぜか自動ビルドが複数動作してしまうことがあります。
ここの改善を加えたいです。

全体のソースコード

gistb7bd1fc063376da60128