在因子束的部分束上进行一些操作
我正在用browserify和factor-bundle来使用gulp。 我有以下代码:
b = browserify({ entries: [ 'a.js', 'b.js'], plugin: [ [ 'factor-bundle', { outputs: [ 'build/a.js', 'build/b.js' ] } ] ] }) .bundle() .pipe(source('bundle.js')) .pipe(buffer()) .pipe(gulp.dest('/build/common'));
我想在这个parial bundles('build / a.js'和'build / b.js')上进行一些操作(比如uglify,bundle-collapser或其他工作)。 我尝试使用factor-bundle页面上描述的方法:
b.plugin('factor-bundle', { outputs: [ write('x'), write('y') ] }); function write (name) { return concat(function (body) { console.log('// ----- ' + name + ' -----'); console.log(body.toString('utf8')); }); }
但我不明白的write()方法,不知道如何执行uglification和如何gulp.dest结果。
任何想法? 说明?
write()
方法返回一个可写入的stream,允许您通过进一步的下游转换来pipe理由factor-bundle插件生成的包。
例如,你的write()
方法可能看起来像这样:
var path = require('path'); var file = require('gulp-file'); var sourcemaps = require('gulp-sourcemaps'); function write (filepath) { return concat(function (content) { // create new vinyl file from content and use the basename of the // filepath in scope as its basename. return file(path.basename(filepath), content, { src: true }) // uglify content .pipe(uglify()) // write content to build directory .pipe(gulp.dest('./build/scripts')) }); }
你会这样使用它:
browserify({ entries: [ 'a.js', 'b.js'], plugin: [ [ 'factor-bundle', { outputs: [ write('a.js'), write('b.js') ] } ] ] }) .bundle() .pipe(write('common.js')) // Could have use these instead, but it wouldn't be as DRY. // .pipe(source('common.js')) // .pipe(uglify()) // .pipe(gulp.dest('./build/scripts'))
在调用.bundle()
之后,使用factor-bundle
插件会影响browserify的输出。 通常情况下,它会生成映射到每个入口文件的可读stream,然后您可以将更多的转换应用到它们。
相反,您将得到一个可读的stream,其中包含一个包含来自提供的条目文件的共享公共模块的包,我已经在上面的示例中调用了common.js
。 然后,您需要处理分别映射到每个条目文件的可读stream的转换。
在上面的例子中,我添加了可写的stream到输出数组,按照与我的入口文件相同的顺序排列,这些入口文件以可读stream的forms接收各自的包,并对它们进一步应用转换
你也可以利用factor.pipeline
事件 :
var b = browserify({ ... }); b.on('factor.pipeline', function (id, pipeline) { pipeline.get('wrap').push(write(id)); }); b.plugin(factor); return b.bundle().pipe(write('common.js'));
我认为值得注意的是,将更多的下游工作应用到产出中是完全脱离了pipe道的。 因此,如果您正在使用gulp并从browserify中返回stream,那么该任务将提前完成,因为它仍将对input文件执行操作。 我还没有遇到这个问题呢。
希望这可以帮助。
- 我怎样才能得到browserify的“捆绑”function发出结束事件?
- Maven / Spring与Browserify:需求未定义
- google-trends-api npm找不到使用browserify的模块
- 警告:找不到任务“browserfy”
- Browserify with require('fs')
- 对象#<Readable>在使用Gulp + Browserify时没有方法“写入”
- 仅在Gulp任务中的文件夹中的一部分文件上使用Browserify
- 使用Grunt-babelify-browserify而不导入节点模块
- 这真的是从事件callback中获得Rx.Observable的最好方法吗?