Gulp 捆绑然后缩小

Question

我正在为我的应用程序创建 3 个缩小的包。我有 2 个任务来执行此操作，缩小和捆绑。 Minify 依赖于 bundle。如果我运行缩小，两个任务运行都没有错误。创建了包，但没有创建缩小的文件。如果我删除了对 bundle 的依赖，我就可以运行自己缩小，并且成功创建了缩小文件。这让我相信当 minify 任务触发时文件可能正在使用中（因为 bundle 还没有完成？）。我如何让它等到文件完全准备好？我可以通过流吗？或者也许将这些组合成一个任务？它们目前不是单个任务的原因是因为它们每个包输出 2 个文件（一个未缩小的和一个缩小的包）。

var outFolder = __dirname + '\Scripts\dist';
var appBundles = [
    { scripts: ['Scripts/Common/**/*.js'], output: 'eStore.common.js' },
    { scripts: ['Scripts/Checkout/**/*.js'], output: 'eStore.checkout.js' },
    { scripts: ['Scripts/ProductDetail/**/*.js'], output: 'eStore.product.js' }
];

gulp.task('bundle', bundle);
gulp.task('minify', ['bundle'], minify);  // this one doesn't work
gulp.task('minifyOnly', minify);          // this one works

function bundle() {
    appBundles.forEach(function (appBundle) {
        gulp.src(appBundle.scripts)
            .pipe(concat(appBundle.output))
            .pipe(sourcemaps.init())
            .pipe(sourcemaps.write(outFolder + '\maps'))
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

function minify() {
    appBundles.forEach(function(appBundle) {
        var bundleSrc = outFolder + '\' + appBundle.output;
        gulp.src(bundleSrc)
            .pipe(rename({ extname: '.min.js' }))
            .pipe(uglify())
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

Answer 1

让 minify 任务使用与 bundle 任务相同的源文件。 'concat' 将用于两个任务。这样 minify 就不会依赖于 bundle 任务的输出。

function minify() {
    appBundles.forEach(function (appBundle) {
        console.log('Creating minified bundle for: ' + appBundle.output);
        gulp.src(appBundle.scripts)
            .pipe(concat(appBundle.output))
            .pipe(rename({ extname: '.min.js' }))
            .pipe(uglify())
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

function bundle() {
    appBundles.forEach(function (appBundle) {
        console.log('Creating bundle and sourcemaps: ' + appBundle.output);
        gulp.src(appBundle.scripts)
            .pipe(concat(appBundle.output))
            .pipe(sourcemaps.init())
            .pipe(sourcemaps.write(outFolder + '\maps'))
            .pipe(gulp.dest(outFolder))
            .on('error', errorHandler);
    });
}

Gulp 捆绑然后缩小

Gulp bundle then minify

gulp

gulp-concat

gulp-uglify