gulp Browserify與glob和uglify/factor-bundle

Question

我目前正在進入browserify。我喜歡它，但在我開始使用它之前，我想將它自動化。 Gulp是我選擇的構建系統。

那麼我其實想做的是：

獲取js/app/**.js，它捆綁到js/bundle/並提取公共依賴到js/bundle/common.js。另外uglify的一切，並添加源地圖。

好吧。瀏覽器的支持似乎很差，至少我的谷歌研究非常令人失望。

無論如何。到目前爲止我所擁有的東西。

var gulp = require('gulp'), 
    browserify = require('browserify'), 
    factor = require('factor-bundle'); 

// ... 

// gulp task 
return browserify({ 
    entries: ['js/app/page1.js', 'js/app/page2.js'], 
    debug: true 
}) 
    .plugin(factor, { 
     o: ['js/bundle/page1.js', 'js/bundle/page2.js'] 
    }) 
    .bundle() 
    .pipe(source('common.js')) 
    .pipe(gulp.dest('js/bundle/')); 

那麼這既不uglifying也不添加源文件和更少使用glob模式。我可以找到一個official recipe，它向我展示瞭如何使用管道添加其他轉換，如uglify。但它只適用於單個文件。

Answer 1

作爲factor-bundle的輸出參數，使用流而不是文件路徑。你可以隨意做任何你想要的流。

var indexStream = source("index.js"); 
    var testStream = source("tests.js"); 
    var commonStream = bundler.plugin('factor-bundle', { outputs: [indexStream, testStream] }) 
    .bundle() 
    .pipe(source('common.js')); 


    return merge(indexStream, commonStream, testStream) 
    .pipe(buffer()) 
    .pipe(sourcemaps.init({ debug: true, loadMaps: true })) 
    .pipe(uglify()) 
    .pipe(gulp.dest('js/bundle/')) 

Answer 2

感謝Liero的回答，我得到了一些非常類似的工作。這裏是完整的gulp文件：

const gulp = require('gulp'); 
const browserify = require('browserify'); 
const factor = require('factor-bundle'); 
const source = require('vinyl-source-stream'); 
const sourcemaps = require('gulp-sourcemaps'); 
const buffer = require('gulp-buffer'); 
const merge = require('gulp-merge'); 

gulp.task('bfb', function() { 

    const fejs = 'public/javascripts/' // location of source JS 
    const fejsb = fejs + 'b/';   // location of bundles 
    const modules = [ // aka entry points 
     'accounts', 
     'invoice', 
     'invoices', 
     // etc... 
    ]; 
    const inputs = []; 
    const streams = []; 

    modules.forEach(function (module) { 
     inputs.push(fejs + module + '.js'); 
     streams.push(source(module + '.js')); 
    }); 

    const bundler = browserify(inputs, {}); 
    const commonStream = bundler.plugin(factor, { outputs: streams }) 
     .bundle() 
     .pipe(source('common.js')); 
    streams.push(commonStream); 

    return merge(streams) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     //.pipe(uglify()) // haven't tested this bit 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest(fejsb)); 

});