javascript - 使用 gulp with google closure 将 js 文件编译成单独的文件而不是单个文件

Question

我正在使用 google-closure-compiler 和 gulp 来缩小我的 angularjs 文件。

我在 app/js 文件夹中有 3 个 js 文件。它们是 controller.js、app.js、services.js。

这是我的 gulpfile 代码:

var closureCompiler = require('google-closure-compiler').gulp();

gulp.task('js-closure', function () {
    return gulp.src('app/js/*.js', {base: './'})
        .pipe(closureCompiler({
            compilation_level: 'SIMPLE_OPTIMIZATIONS',
            warning_level: 'QUIET',
            language_in: 'ECMASCRIPT6_STRICT',
            language_out: 'ECMASCRIPT5_STRICT',
            output_wrapper: '(function(){\n%output%\n}).call(this)',
            js_output_file: 'output.min.js'
        }))
        .pipe(gulp.dest('./dist/js'));
});

代码所做的是将 3 个 js 文件编译成一个文件 output.min.js

我想要的是将3个js文件编译成3个独立的js文件controller.min.js, app.min.js, services.min.js

Answer 1

据我所知，无法避免 Google Closure Compiler 合并您的文件。即使您省略了 js_output_file 选项，它也只会默认为输出文件名 compiled.js。这意味着您必须为每个文件调用 Closure Compiler。

gulp-flatmap 插件可以让您轻松做到这一点。您只需为每个输入文件确定 js_output_file 的值(基本上将每个文件名中的 .js 替换为 .min.js):

var flatmap = require('gulp-flatmap');
var path = require('path');

gulp.task('js-closure', function () {
  return gulp.src('app/js/*.js', {base: './'})
    .pipe(flatmap(function(stream, file) {
      return stream.pipe(closureCompiler({
        compilation_level: 'SIMPLE_OPTIMIZATIONS',
        warning_level: 'QUIET',
        language_in: 'ECMASCRIPT6_STRICT',
        language_out: 'ECMASCRIPT5_STRICT',
        output_wrapper: '(function(){\n%output%\n}).call(this)',
        js_output_file: path.basename(file.path).replace(/js$/, 'min.js')
      }))
    }))
    .pipe(gulp.dest('./dist/js'));
});