# 使用 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'));
}
```
- gulp 中文文檔
- 入門指南
- gulp API 文檔
- 編寫插件
- 指導
- 使用 buffer
- 使用 Stream 處理
- 測試
- FAQ
- gulp 技巧集
- 整合 streams 來處理錯誤
- 刪除文件和文件夾
- 使用 watchify 加速 browserify 編譯
- 增量編譯打包,包括處理整所涉及的所有文件
- 將 buffer 變為 stream (內存中的內容)
- 在 gulp 中運行 Mocha 測試
- 僅僅傳遞更改過的文件
- 從命令行傳遞參數
- 只重新編譯被更改過的文件
- 每個文件夾生成單獨一個文件
- 串行方式運行任務,亦即,任務依賴
- 擁有實時重載(live-reloading)和 CSS 注入的服務器
- 通過 stream 工廠來共享 stream
- 指定一個新的 cwd (當前工作目錄)
- 分離任務到多個文件中
- 使用外部配置文件
- 在一個任務中使用多個文件來源
- Browserify + Uglify2 和 sourcemaps
- Browserify + Globs
- 同時輸出一個壓縮過和一個未壓縮版本的文件
- 改變版本號以及創建一個 git tag
- Swig 以及 YAML front-matter 模板