# 使用 watchify 加速 browserify 編譯 當一個 [browserify](http://github.com/substack/node-browserify) 項目開始變大的時候，編譯打包的時間也會慢慢變得長起來。雖然開始的時候可能只需花 1 秒，然后當你的項目需要建立在一些流行的大型項目的基礎上時，它很有可能就變成 30 秒了。 這就是為什么 [substack](http://github.com/substack) 寫了 [watchify](http://github.com/substack/watchify) 的原因，一個持續監視文件的改動，并且 _只重新打包必要的文件_ 的 browserify 打包工具。用這種方法，第一次打包的時候可能會還是會花 30 秒，但是后續的編譯打包工作將一直保持在 100 毫秒以下 —— 這是一個極大的提升。 watchify 并沒有一個相應的 gulp 插件，并且也不需要有：你可以使用 [vinyl-source-stream](http://github.com/hughsk/vinyl-source-stream) 來把你的用于打包的 stream 連接到 gulp 管道中。 ``` 'use strict'; var watchify = require('watchify'); var browserify = require('browserify'); var gulp = require('gulp'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var gutil = require('gulp-util'); var sourcemaps = require('gulp-sourcemaps'); var assign = require('lodash.assign'); // 在這里添加自定義 browserify 選項 var customOpts = { entries: ['./src/index.js'], debug: true }; var opts = assign({}, watchify.args, customOpts); var b = watchify(browserify(opts)); // 在這里加入變換操作 // 比如： b.transform(coffeeify); gulp.task('js', bundle); // 這樣你就可以運行 `gulp js` 來編譯文件了 b.on('update', bundle); // 當任何依賴發生改變的時候，運行打包工具 b.on('log', gutil.log); // 輸出編譯日志到終端 function bundle() { return b.bundle() // 如果有錯誤發生，記錄這些錯誤 .on('error', gutil.log.bind(gutil, 'Browserify Error')) .pipe(source('bundle.js')) // 可選項，如果你不需要緩存文件內容，就刪除 .pipe(buffer()) // 可選項，如果你不需要 sourcemaps，就刪除 .pipe(sourcemaps.init({loadMaps: true})) // 從 browserify 文件載入 map // 在這里將變換操作加入管道 .pipe(sourcemaps.write('./')) // 寫入 .map 文件 .pipe(gulp.dest('./dist')); } ```