# Browserify + Globs
[Browserify + Uglify2](https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-uglify-sourcemap.md) 展示了如何設置一個基礎的 gulp 任務來把一個 JavaScript 文件以及它的依賴打包,并且使用 UglifyJS 壓縮并且保留 source map。 然而這還不夠,這里還將會展示如何使用 gulp 和 Browserify 將多個文件打包到一起。
同時請看: [組合 Streams 來處理錯誤](https://github.com/gulpjs/gulp/blob/master/docs/recipes/combining-streams-to-handle-errors.md) 范例來查看如何處理你的 stream 中 browserify 或者 uglify 的錯誤。
```
'use strict';
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var globby = require('globby');
var through = require('through2');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var reactify = require('reactify');
gulp.task('javascript', function () {
// gulp 希望任務能返回一個 stream,因此我們在這里創建一個
var bundledStream = through();
bundledStream
// 將輸出的 stream 轉化成為一個包含 gulp 插件所期許的一些屬性的 stream
.pipe(source('app.js'))
// 剩下的部分,和你往常縮寫的一樣。
// 這里我們直接拷貝 Browserify + Uglify2 范例的代碼。
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
// 在這里將相應 gulp 插件加入管道
.pipe(uglify())
.on('error', gutil.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/js/'));
// "globby" 替換了往常的 "gulp.src" 為 Browserify
// 創建的可讀 stream。
globby(['./entries/*.js'], function(err, entries) {
// 確保任何從 globby 發生的錯誤都被捕獲到
if (err) {
bundledStream.emit('error', err);
return;
}
// 創建 Browserify 實例
var b = browserify({
entries: entries,
debug: true,
transform: [reactify]
});
// 將 Browserify stream 接入到我們之前創建的 stream 中去
// 這里是 gulp 式管道正式開始的地方
b.bundle().pipe(bundledStream);
});
// 最后,我們返回這個 stream,這樣 gulp 會知道什么時候這個任務會完成
return bundledStream;
});
```
- 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 模板