链 Gulp glob 到 browserify 转换

Question

我有一个项目，其中包含一些相对不相交的页面，每个页面都包含自己的入口点脚本。这些脚本 require 其他一些使用 commonjs 语法，需要由 6to5 转换并由 browserify 捆绑。

我想设置一个 gulp 任务来捕获所有匹配模式的文件并将它们传递给捆绑器，但我不确定如何从 gulp.src 传递文件至 browserify(filename).

我的 gulp 文件看起来像：

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"]);

这似乎可行，但无法维护：我将很快添加更多脚本，并且不想每次都将它们添加到数组中。

我试过在调用 (shown here) 和 gulp.src(glob).map（方法不存在）后在 browserify 调用和管道中使用 gulp.src(glob).pipe。

如何将 gulp.src 链接到像 browserify 这样的基于名称的转换器？

Answer 1

您可以在 BUNDLES 数组中指定 glob 并排除任何文件：

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

Answer 2

使用 through2 制作一个一次性的自定义插件流来完成所有繁琐的工作。

不幸的是 vinyl-transform and 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'));
});

链 Gulp glob 到 browserify 转换

Chain Gulp glob to browserify transform

javascript

glob

browserify

gulp