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返回的还是一个流。
Original: https://www.cnblogs.com/darrenji/p/5492293.html
Author: Darren Ji
Title: 使用Gulp和Browserify创建多个绑定文件
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/551547/
转载文章受原作者版权保护。转载请注明原作者出处！