使用Gulp和Browserify創建多個綁定文件

Browserify是一個Javascript的綁定工具，幫助我們理順module之間的依賴關系。Gulp用來優化workflow。兩者的共同點都是使用流，但在使用流方面也有不同之處：

• Browserify只要接受文件內容即可
• Gulp不但接受文件內容，還需要接受源文件信息，然后把源文件寫到一個目標文件

Gulp在文件的寫入寫出過程中，需要Vinyl的幫助。Vinyl是一個虛擬的文件系統，當我們寫gulp.src('*.js')實際上是把硬盤上的文件放到了vinyl object中；當我們寫gulp.dest('somewhere')的時候，就是把vinyl object中的內容通過流寫到硬盤上的somewhere文件夾中去。

使用Gulp和Browserify創建一個綁定文件

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.taks('browserify', function(){
	return browserify({entrieis:['path/main.js']})
		.bundle()
		.pipe(source(main.bundle.js))
		.pipe(gulp.dest('dist'));
});

### 使用Gulp和Browserify創建多個綁定文件

'use strict';

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var rename = require('gulp-rename');
var browserify = require('browserify');
var es = require('event-stream');

gulp.taks('default', function(){
	//定義多個入口文件
	var entryFiles = [
		'./app/main-a.js',
		'./app/main-b.js'
	];

	//遍歷映射這些入口文件
	var tasks = entiryFiles.map(function(entry){
		return browserify({entries: [entry]})
			.bundle()
			.pipe(source(entry))
			.pipe(rename({
				extname: '.bundle.js'
			}))
			.pipe(gulp.dext('./dist'));
	});

	//創建一個合並流
	return es.merge.apply(null, tasks);
});

以上， 在定義入口文件的時候，這樣寫的好處是很具體，但如果有很多入口文件，是不是可以有一種更好的寫法呢?

'use strict';

var gulp       = require('gulp'),
    source     = require('vinyl-source-stream'),
    rename     = require('gulp-rename'),
    browserify = require('browserify'),
    glob       = require('glob'),
    es         = require('event-stream');

gulp.task('default', function(done) {
    glob('./app/main-**.js', function(err, files) {
        if(err) done(err);

        var tasks = files.map(function(entry) {
            return browserify({ entries: [entry] })
                .bundle()
                .pipe(source(entry))
                .pipe(rename({
                    extname: '.bundle.js'
                }))
                .pipe(gulp.dest('./dist'));
            });
        es.merge(tasks).on('end', done);
    })
});

使用glob可以把符合條件的入口文件找出來。可見，通過gulp.task返回的還是一個流。