Chain Gulp glob来浏览转换 [英] Chain Gulp glob to browserify transform

问题描述

我有一个项目有一些相对不相关的页面，每个页面都包含他们自己的入口点脚本。这些脚本需要其他许多使用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 to browserify（filename）。

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).

我的gulp文件看起来像：

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.

我试过使用 gulp.src（glob）.pipe

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?

推荐答案

使用到2 制作一次性自定义插件流，完成所有肮脏的工作。

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

不幸 vinyl-转换 和 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'));
});

这篇关于Chain Gulp glob来浏览转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！