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