将 Gulp glob 链接到浏览器化转换

2022-01-12 00:00:00 glob javascript gulp browserify

我有一个项目，其中包含几个相对不相交的页面，每个页面都包含自己的入口点脚本.这些脚本需要其他一些使用commonjs语法的脚本，需要经过6to5转换并被browserify打包.

I have a project with a few relatively disjoint pages, each including their own entry point script. These scripts require a number of others using commonjs syntax, and need to be transformed by 6to5 and bundled by browserify.

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

I would like to set up a gulp task that captures all the files matching a pattern and passes them on to the bundler, but I'm not sure how to pass files from gulp.src to browserify(filename).

我的 gulpfile 看起来像:

My gulpfile looks like:

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

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

This seems to work, but isn't maintainable: I'll be adding more scripts relatively soon, and don't want to add them to the array every time.

我尝试在 browserify 调用中使用 gulp.src(glob).pipe 并在调用后使用管道 (此处显示)和 gulp.src(glob).map(方法不存在).

I've tried using gulp.src(glob).pipe within the browserify call and piping after calling (shown here), and gulp.src(glob).map (method doesn't exist).

如何将 gulp.src 与 browserify 等基于名称的转换器链接起来?

How can you chain gulp.src with a name-based transformer like browserify?

推荐答案

使用through2制作一次性的自定义插件流，可以完成所有繁琐的工作.

Use through2 to make a one-off custom plugin stream that does all of the dirty work.

不幸的是 vinyl-transform 和 vinyl-source-stream 以及随之而来的解决方案缺陷，所以我们必须去定制一些东西.

Unfortanately vinyl-transform and vinyl-source-stream and the solutions that go along with those have flaws so we have to go for something custom.

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'));
});

相关文章