使用谷歌關閉gulp編譯成單個文件而不是單個文件的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編譯器合併文件。即使你忽略了js_output_file選項，它也只是默認爲輸出文件名compiled.js。這意味着你必須爲每個文件調用Closure Compiler。

gulp-flatmap插件讓你輕鬆做到這一點。你只需要確定的js_output_file每個輸入文件中的值（基本上在每個文件名與.min.js替換.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')); 
});