browserify 與 watchify 分享

本篇來分享一下在 gulp 的建構環境中如何使用 browserify 以及 watchify

如果對 gulp 與 browserify 不熟的的建議要先學習一下，browserify 之前的文章都有提到過了

而 gulp 則是一個目前盛行於 javascript 的建構工具，相較於 Grunt 而言，實在是好用太多了 ^.^

至於為什麼要介紹 browserify 與 watchify，其目的在於希望能夠再開發的過程中

如果一有程式的變動，就能夠自動執行 browserify 建構的動作，基於這個因素就需要 watchify 的協助

對 gulp 有初步了解的開發者可能也知道 gulp 本身自帶有 gulp.watch 的功能

也是一個能夠自動監控檔案，當檔案發生變化時會自動執行開發者指定的函式，例如：

	gulp.task("build", function(){
	//building your app.
	});
	gulp.task("dev", function(){
	gulp.watch("./src/app.js", ['build']);
	});

view raw gulpfile-basic.js hosted with ❤ by GitHub

但 gulp.watch 的功能與 browserify 的整合比較困難，畢竟一個 javascript 的 dependency 是相當複雜的

如果利用 watchify 好處就是它只會 rebuild (重新建構) 有需要重新建構的程式

所以接下來就來分享一下，如何利用 browserify 與 watchify 來達成這樣子的一個目標

	var gulp = require('gulp');
	var browserify = require('browserify');
	var watchify = require('watchify');
	var source = require("vinyl-source-stream");
	gulp.task("dev", function(){
	//create a browserify instance at first
	var b = browserify({
	entries: ["./src/app.js"], //entry point
	transform: [],
	cache: {},
	debug: true,
	packageCache: {},
	fullPaths: true,
	});
	//create a watchify instance by a browserify instance
	b = watchify(b);
	//register an update event for watchify
	b.on('update', function(){
	build(b);
	});
	build(b);
	})
	function build(b){
	b.bundle()
	.pipe(source("bundle.js"))
	.pipe(gulp.dest("./build"));
	}

view raw gulpfile.js hosted with ❤ by GitHub