問題描述

我有一個項目，其中包含幾個相對不相交的頁面，每個頁面都包含自己的入口點腳本.這些腳本需要其他一些使用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'));
});

這篇關于將 Gulp glob 鏈接到瀏覽器化轉換的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！