使用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返回的还是一个流。