以前、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
Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境 – モンキーレンチ
PAYFORWARD – Engineering & Research for a Better Future
gulp-watchifyを使って差分監視によるJSの高速ビルド環境を構築する - undefined
browserify api use to file without gulp to trigger callback on success : answer uxu