如果對 gulp 與 browserify 不熟的的建議要先學習一下，browserify 之前的文章都有提到過了
而 gulp 則是一個目前盛行於 javascript 的建構工具，相較於 Grunt 而言，實在是好用太多了 ^.^
至於為什麼要介紹 browserify 與 watchify，其目的在於希望能夠再開發的過程中
如果一有程式的變動，就能夠自動執行 browserify 建構的動作，基於這個因素就需要 watchify 的協助
對 gulp 有初步了解的開發者可能也知道 gulp 本身自帶有 gulp.watch 的功能
也是一個能夠自動監控檔案，當檔案發生變化時會自動執行開發者指定的函式，例如：
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| gulp.task("build", function(){ | |
| //building your app. | |
| }); | |
| gulp.task("dev", function(){ | |
| gulp.watch("./src/app.js", ['build']); | |
| }); |
如果利用 watchify 好處就是它只會 rebuild (重新建構) 有需要重新建構的程式
所以接下來就來分享一下，如何利用 browserify 與 watchify 來達成這樣子的一個目標
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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")); | |
| } |
