每当更改 js 文件时调用闭包答案

【问题标题】：Invoke closure whenever js file is changed每当更改 js 文件时调用闭包
【发布时间】：2016-12-03 10:57:29
【问题描述】：

我正在使用 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？有什么好的示例吗？

【问题讨论】：

您添加了 gulp-watch 作为问题的标签 - 这也是答案。
感谢您的提示。一些示例会有所帮助。

标签： javascript gulp google-closure-compiler gulp-watch

【解决方案1】：

直接来自 gulp api 文档：

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...');
});

【讨论】：

【解决方案2】：

正如您所指出的，使用 gulp-watch 是正确的方法。一个简单的改变就足够了。

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'));
    });
});

【讨论】：