gulp＋Browserifyで、JavaScriptビルド／minify／watchify／livereload

以前、gulp＋webpackで似たようなことをやったのですが、Broserifyを使った自分なりのgulpfile.jsを作っておこうかなと思いまして。

やりたいこと。

BrowserifyでJavaScriptを結合
minifyする
sourcemapを作成する
wachifyを使って差分コンパイル

ということをやるように、npm moduleをインストールしてgulpfile.jsを書きました。

以下、発行したコマンド。

$ npm init
$ npm install -g gulp    
$ npm install --save-dev gulp browserify gulp-load-plugins gulp-uglify gulp-sourcemaps gulp-plumber gulp-util vinyl-source-stream vinyl-buffer gulp-webserver watchify del

作成したgulpfile.js。
gulpfile.js

var gulp = require("gulp");
var $ = require('gulp-load-plugins')();
var browserify = require("browserify");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var del = require("del");
var watchify = require("watchify");

gulp.task("clean", function() {
    del.sync("dist/*");  // clean distribution
});

gulp.task("browserify", function() {
    var bundler =
        browserify({
            entries: ["src/main.js"],  // entry point
            debug: true,
            plugin: [watchify]  // watchify
        });

    var rebundle = function() {
        bundler
            .bundle()
            .on("error", $.util.log)  // message when compile error
            .on("end", function() { $.util.log("browserify compile success."); })  // message when compile end.
            .pipe($.plumber())
            .pipe(source("app.js"))  // distribution filename
            .pipe(buffer())
            .pipe($.uglify())  // minify
            .pipe($.sourcemaps.init({loadMaps: true}))  // sourcemap
            .pipe($.sourcemaps.write("./"))
            .pipe(gulp.dest("dist"));  // destination for distribution
    };

    bundler.on("update", rebundle);  // continuous compile
    rebundle();
});

gulp.task("webserver", ["browserify"], function() {
    gulp
        .src("./")
        .pipe($.webserver({
            port: 9000,
            livereload: true  // enable reload
        }));
});

gulp.task("default", ["browserify", "webserver"]);

いろいろ試行錯誤しましたが、こんな感じに落ち着きました…。

起動すると、

$ gulp
[22:06:29] Using gulpfile ~/path/to/gulpfile.js
[22:06:29] Starting 'browserify'...
[22:06:29] Finished 'browserify' after 87 ms
[22:06:29] Starting 'webserver'...
[22:06:29] Webserver started at http://localhost:9000
[22:06:29] Finished 'webserver' after 163 ms
[22:06:29] Starting 'default'...
[22:06:29] Finished 'default' after 8.51 μs
[22:06:29] browserify compile success.

変更があったら継続的にコンパイルしてくれます、と。

[22:06:29] browserify compile success.
[22:07:13] browserify compile success.

参考）
https://github.com/marcello3d/gulp-watchify/blob/master/examples/simple/gulpfile.js

https://github.com/marcello3d/gulp-watchify/blob/master/examples/uglified/gulpfile.js

Watchifyでbrowserifyを差分ビルド

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

watchify を試す – アカベコマイリ

gulp-watchify を試す – アカベコマイリ

PAYFORWARD – Engineering & Research for a Better Future

gulp-watchifyを使って差分監視によるJSの高速ビルド環境を構築する - undefined

gulpプラグインエラー時に発生するイベントの調査

browserify api use to file without gulp to trigger callback on success : answer uxu

CLOVER🍀

That was when it all began.

gulp＋Browserifyで、JavaScriptビルド／minify／watchify／livereload