Chain Gulp glob to browserify transform

我有一個項目，有一些相對不相關的頁面，每個頁面都包含他們自己的入口點腳本。這些腳本require其他許多人使用commonjs語法，並且需要通過6to5進行轉換並通過browserify進行捆綁。Chain Gulp glob to browserify transform

我想設置一個吞噬任務，捕獲所有匹配模式的文件並將它們傳遞給打包程序，但我不知道如何將文件從gulp.src傳遞到browserify(filename)。

我gulpfile樣子：

var gulp = require("gulp"); 
var browserify = require("browserify"); 
var to5browserify = require("6to5-browserify"); 
var source = require("vinyl-source-stream"); 

var BUNDLES = [ 
    "build.js", 
    "export.js", 
    "main.js" 
]; 

gulp.task("bundle", function() { 
    /* Old version, using glob: 
    return gulp.src("src/** /*.js") 
     .pipe(sixto5()) 
     .pipe(gulp.dest("dist")); 
    */ 

    // New version, using array: 
    return BUNDLES.map(function (bundle) { 
     return browserify("./src/" + bundle, {debug: true}) 
      .transform(to5browserify) 
      .bundle() 
      .pipe(source(bundle)) 
      .pipe(gulp.dest("./dist")); 
    }); 
}); 

gulp.task("scripts", ["bundle"]); 

gulp.task("html", function() { 
    return gulp.src("src/**/*.html") 
     .pipe(gulp.dest("dist")); 
}); 

gulp.task("styles", function() { 
    return gulp.src("src/**/*.css") 
     .pipe(gulp.dest("dist")); 
}); 

gulp.task("default", ["scripts", "html", "styles"]);

這似乎是工作，而不是維護：我會相對快地增加更多的腳本，並且不希望每次都將它們添加到陣列。

我試過在browserify呼叫和管道呼叫（shown here）和gulp.src(glob).map（方法不存在）後使用gulp.src(glob).pipe。

如何將gulp.src與基於名稱的轉換器（如browserify）相鏈接？

來源

2015-02-10 ssube

使用through2做，做所有的髒活的一次性定製插件流。

不幸的是vinyl-transform和vinyl-source-stream和解決方案，那些有缺陷，所以我們必須去的東西定製。

var gulp = require('gulp'); 
var through = require('through2'); 
var browserify = require('browserify'); 

gulp.task('bundle', function() { 
    var browserified = function() { 
     return through.obj(function(chunk, enc, callback) { 
      if(chunk.isBuffer()) { 
       var b = browserify(chunk.path); 
        // Any custom browserify stuff should go here 
        //.transform(to5browserify); 

       chunk.contents = b.bundle(); 

       this.push(chunk); 

      } 
      callback(); 
     }); 
    }; 

    return gulp.src(['./src/**/*.js']) 
     .pipe(browserified()) 
     .pipe(gulp.dest('dest')); 
});

來源

2015-02-10 21:10:53 MLM

這似乎非常接近，但我遇到了6to5的問題。使用你的代碼，但在'.bundle（）'之前添加'.transform（）'調用會導致「寫入結束後」錯誤。我嘗試在'gulp.src'調用中添加'{read：false}'選項，但是這導致我的分區爲空。 – ssube 2015-02-10 21:29:28

使用'pipe（through.obj（））'擺脫了「write after end」錯誤，但輸出文件被瀏覽*但不是6to5-ified *。 – ssube 2015-02-10 21:47:05

經過編輯（以及一段時間的聊天）後，這似乎解決了這個問題。這感覺像是一點點黑客，但似乎運作良好（本地和CI）。 – ssube 2015-02-11 17:56:05

-2

您可以指定你的管束陣列水珠以及排除任何文件：

var BUNDLES = [ 
    "app/**/*.js", 
    "export.js", 
    "app/modules/**/*.js", 
    "!app/modules/excluded/*.js" 
];

來源

2015-02-10 20:24:16 sma

這只是簡單地拋出一個錯誤'無法找到模塊'src/**/*。js''當它遇到glob到browserify的路上。 – ssube 2015-02-10 20:27:41

Chain Gulp glob to browserify transform

回答

相關問題