Gulp js 运行 watch语句两次

Question

一旦我更改任何 javascript 文件，我就会看到控制台日志语句 js 任务运行两次。我想知道为什么每次更改运行两次？

var gulp = require('gulp');
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");

gulp.task('default', function() {
    gulp.watch("public/js/**/*.*", ["js"]);
});

gulp.task("js", function(){
    var js = [
        "public/js/**/*.js",
        "!public/js/api/**/*.js"
    ];

    gulp.src(js)
    .pipe(concat("app.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest("public/js"));
});

控制台

[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 1.6 ms
[13:02:27] Starting 'js'...
[13:02:27] Finished 'js' after 5.1 ms

Answer 1

问题是当检测到更改时，您正在监视用作任务目标目录的同一目录运行。目前，您的构建流程如下所示：

假设您正在修改文件 public/js/script.js.
监视任务检测到变化并启动您的自定义 js 任务。结果，创建了 public/js/app.min.js 文件。
由于 app.min.js 在监视目录中，监视任务检测到另一个变化，因此 js 任务 再次执行。您实际上应该运行进入一个循环，但是 Gulp 似乎足够聪明，可以检测到这样的循环。

此问题的最佳解决方案是将源文件与输出分开。在您的任务管道中，将目标文件夹设置为源目录之外的内容，例如：

.pipe(gulp.dest("dist/js"));

之后，您的项目应该具有以下结构：

public
  js
    script.js
dist
  js
    app.min.js
grunfile.js
...

其中 public 目录用于保存观看的源文件，dist 目录保存输出的构建。如果我是你，我会重新考虑将 public 目录重命名为更具描述性的内容，例如 src，但这取决于你： )

Gulp js 运行 watch语句两次

Gulp js running twice for the watch statement

gulp

gulp-watch