每當更改js文件時調用閉包

Question

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

這是我的gulpfile代碼;

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

gulp.task('js-closure', function() { 
    return gulp.src(['app/js/*.js', 'dist/single.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')); 
}); 

該代碼工作正常。但是，我必須在命令行上手動運行gulp js-closure才能編譯js文件。

我想在任何一個js文件改變時自動編譯js文件。

編輯：gulp-watch似乎很適合這個問題https://www.npmjs.com/package/gulp-watch。如何修改代碼以使用gulp-watch？任何好的示例示例？從吞氣API文檔

Answer 1

直：

var watcher = gulp.watch(['app/js/*.js', 'dist/single.js'], ['js-closure']); 
watcher.on('change', function(event) { 
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); 
}); 

Answer 2

正如你所指出的，使用一飲而盡手錶是正確的做法。一個簡單的改變就足夠了。

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

gulp.task('js-closure', function() { 
    return watch(['app/js/*.js', 'dist/single.js'], function() 
    { 
     gulp.src(['app/js/*.js', 'dist/single.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')); 
    }); 
});