Gulp Watch Concat 有时会忽略一些 JS 文件答案

【问题标题】：Gulp Watch Concat sometimes ignores some JS filesGulp Watch Concat 有时会忽略一些 JS 文件
【发布时间】：2014-07-27 04:07:04
【问题描述】：

我有一个 Gulp concat watch 任务设置来连接一些 JS 文件：

var sources = [
  'public/js/scriptA.js',
  'public/js/scriptB.js',
  'public/js/scriptC.js',
  'public/js/scriptD.js',
  'public/js/scriptE.js'
];

gulp.task('main.js', function(){
    return gulp.src(sources)
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./public/js'));
});

gulp.task('watch', function() {
    gulp.watch(sources, ['main.js']);
});

我认为很正常的设置。每当任何脚本更改时，都会通过按该顺序连接脚本来创建main.js。它在 99% 的情况下都能正常工作。

但有时，可能是随机的，concat 只是遗漏了 1 个或多个文件。例如，我将编辑scriptB.js，保存它，然后查看main.js，它只连接了scriptA、scriptB 和scriptE。它完全忽略了 C 和 D。有时它可能只是 C。有时它可能是 D。有时它可能是 A。它只是随机的。我没有对它遗漏的任何文件做任何事情。我在我的编辑器中打开了它，但它没有改变，只是坐在那里。 Gulp 有时只是出于某种随机原因决定将其排除在外。

我修复它的方法是简单地打开任何脚本遗漏并在随机行或其他内容的末尾添加一个空格，然后保存它，然后main.js 像我期望的那样连接起来。该文件没有任何问题。只好重新保存。

据任何人所知，这是一个突出的错误吗？我无法在任何地方找到有关此错误的任何信息。我可以做些什么来调试或记录此问题以弄清楚如何重新创建它？

我注意到的一件事是，假设我正在编辑 scriptC 并保存它，然后发现 scriptD 丢失了。如果我回到scriptC 并再次保存它，scriptD 仍未连接。我必须打开scriptD 并保存它以强制将其包含回main.js。因此，一旦我看到问题弹出窗口，我通常可以以这种方式重新创建它。

这通常只发生在 20 次保存中的 1 次。

【问题讨论】：

您的 gulp.watch 行指的是 sources.js.main... 我假设您只是为了使用 sources 而简化了一些事情，但您错过了一个？
是的，我在纠正。就像我说的，concat 大部分时间都很好用。
您找到解决方案了吗？我们看到了同样的问题，有时可以通过更改脚本的顺序来临时“修复”它。绝对是某个地方的问题。
我从来没有找到解决这个问题的方法。通常我只是重新保存被遗漏的文件并以某种方式修复它。这是一个非常奇怪和随机的问题。而且我不确定如何使用 gulp 来调试它并查看问题。
您是否在 concat github 页面上记录了此问题？ github.com/contra/gulp-concat/issues

标签： javascript gulp gulp-watch

【解决方案1】：

你可以使用 gulp-include 插件来解决这个问题。使用此插件，您可以在 main.js 文件中使用特殊的 cmets 来包含/要求您的 js 文件。

main.js：

//=require 'public/js/scriptA.js' 
//=require 'public/js/scriptB.js' 
//=require 'public/js/scriptC.js' 
//=require 'public/js/scriptD.js' 
//=require 'public/js/scriptE.js'

gulpfile.js：

var gulp          = require("gulp"),
    include       = require("gulp-include");

gulp.task("scripts", function() { 

    gulp.src("main.js")
        .pipe(include())
            .on('error', console.log)
        .pipe(gulp.dest("./public/js"));

});

gulp.task('watch', function() {
    gulp.watch(sources, ['main.js']);
});

插件可通过 npm 获得：https://www.npmjs.com/package/gulp-include

【讨论】：