# 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; }); ```