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