使用gulp和browserify将多个条目添加到单个文件

时间:2018-09-09 20:03:44

标签: gulp gruntjs browserify

我正在将项目中的任务运行器从咕unt声更改为gulp,并且在复制以下任务时遇到麻烦:

module.exports = function(grunt) {
    grunt.initConfig({
    browserify: { 
           app: {
                src: ["./app/**/*.js", "./app/**/*.html"],
                dest: "./temp/app.js",
                options: {
                    browserifyOptions: { debug: true },
                    transform: [
                        ["babelify", { "presets": ["es2015"] }],
                        ["stringify", { appliesTo: { includeExtensions: [".html"] }, minify: true}]
                    ]
                }
            }
        }
    });
);

那里有一些指南,可以使用Vinyl-source-stream,glob等创建具有多个入口点的任务,但是它们也都创建了多个输出,例如以下任务:

gulp.task("app", function(done) {
    glob("./app/**/*.{js,html}", function (err, files) {
        if (err) done(err);

        var tasks = files.map(function (entry) {
            return browserify({
                    entries: [entry],
                    transform: [
                         ["babelify", { "presets": ["es2015"] }],
                         ["stringify", { appliesTo: { includeExtensions: [".html"] }, minify: true }]
                    ]
                })
                .bundle()
                .pipe(source(entry))
                .pipe(gulp.dest("./temp"));
        });
        es.merge(tasks).on("end", done);
    });
});

我应该如何更改gulp任务以得到与grunt相同的结果(一个.js文件输出)?

编辑: 经过一番挖掘,我自己找到了一个解决方案...首先,您需要编辑一个文件(在我的情况下为app.js),并为要捆绑的每个文件调用import ...,然后将gulp修改为如下:

gulp.task("app", function () {
   return browserify({
            debug:true,
            entries: ["./app/app.js"],
            transform: [
                ["babelify", { "presets": ["es2015"] }],
                ["stringify", { appliesTo: { includeExtensions: [".html"] }, minify: true }]
            ]
        })
        .bundle()
        .on("error", function (err) { console.error(err); this.emit("end"); })
        .pipe(source("app.js"))
        .pipe(buffer())
        .pipe(gulp.dest("./temp"))
        .pipe(uglify())
        .pipe(rename({ extname: ".min.js"}))
        .pipe(gulp.dest("./temp"));
    });

在这种情况下,它既输出app.js,也输出其最小版本-app.min.js

0 个答案:

没有答案