为什么 grunt-watch 任务说它正在监视我在配置中没有指定的文件/目录？答案

【问题标题】：Why does the grunt-watch task say it is watching files/directories I have not specified in configuration?为什么 grunt-watch 任务说它正在监视我在配置中没有指定的文件/目录？
【发布时间】：2016-07-20 09:58:14
【问题描述】：

我有以下 Gruntfile.js：

module.exports = function (grunt) {

    "use strict";

    grunt.initConfig({
        watch: {
            options: {
              livereload: true
            },
            css: {
                files: ["app.styles.css"]
            },
            js: {
              files: ["app/**/*.js"]
            },
            html: {
              files: ["index.html", "app/**/*.html"]
            }
        },
        connect: {
            server: {
                options: {
                    port: 9000,
                    hostname: "*",
                    livereload: true,
                    open: true
                }
            }
        },
        jshint: {
            files: ["app/**/*.js"]
        }
    });

    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-contrib-connect");

    grunt.registerTask("default", ["connect","watch"]);

};

我的应用程序中有以下结构：

请注意，app、bower_components、css 和图像都在同一级别。

当我运行任务 grunt --verbose 时，我看到我的应用程序中的更多文件/目录正在被监视，包括 bower_components 和 node_modules 目录。

但我没有指定 grunt 来查看这些文件/目录中的任何一个。最重要的是，当我修改配置中指定的 css 文件（app.styles.css）时，Grunt 不会重新加载应用程序。我认为 grunt 只查看了我在 Gruntfile.js 中指定的文件，这正是我想要的。为什么 Grunt 只关注这些额外的文件/目录，而没有关注我的 app.styles.css 文件？

【问题讨论】：

标签： gruntjs grunt-contrib-watch

【解决方案1】：

grunt-contrib-watch 使用名为gaze 的节点包。凝视构建了要观察的文件路径的watched 对象，并实际调用了fs.watch。 watched 对象由目录路径作为键构成，后代文件路径和子目录路径数组作为值。带有单个 scripts.js 文件的 watched 对象可能如下所示：

{    
    "C:\\{{path_to_your_application_root}}\\app\\Scripts\\": [
        "C:\\{{path_to_your_application_root}}\\app\\Scripts\\script.js"
    ]
}

有趣的是，当 Gaze 将文件路径添加到 watched 对象时，它会查找该文件路径的所有同级目录并将这些目录添加到 watched 对象中！

来自凝视源的相关代码如下：

// add folders into the mix
var readdir = fs.readdirSync(dirname);
for (var j = 0; j < readdir.length; j++) {
    var dirfile = path.join(dirname, readdir[j]);
    if (fs.lstatSync(dirfile).isDirectory()) {
        helper.objectPush(this._watched, dirname, dirfile + path.sep);
    }
}

这样做的结果是，当在应用程序根目录中找到“index.html”文件路径时，应用程序根目录中的所有目录（app/、bin/、bower_components/ 等）都会添加到watched 对象也是。

您可以通过从手表中删除“index.html”来确认这一点，您不应再在详细输出中看到所有这些文件夹。

这里是link 讨论为什么凝视库有这种行为。

至于为什么您的“app.styles.css”没有被观看：您是否可能缺少该文件的路径。我在您的应用程序根目录中没有看到“app.styles.css”。大概在css/下。

【讨论】：

【解决方案2】：

所以几个月后回到这个问题后，我终于弄清楚了我需要做些什么才能让它发挥作用。在 Gruntfile.js 中，您需要在 css 属性中添加 options: { livereload: true}。我不知道你为什么需要它在 watch 属性中，然后又在 css 属性中。

具有本地开发服务器和 livereload 的极简工作 Gruntfile.js 是：

module.exports = function (grunt) {

    "use strict";

    grunt.initConfig({
        watch: {
            options: {
                livereload: true
            },
            css: {
                files: ["css/**/*.css"],

                /*********************************** ADDED THIS ************************/
                options: {
                    livereload: true
                }
            },
            js: {
                files: ["app/**/*.js"]
            },
            html: {
                files: ["index.html", "app/**/*.html"]
            }
        },
        connect: {
            server: {
                options: {
                    port: 9000,
                    hostname: "*",
                    livereload: true,
                    open: true
                }
            }
        },
        jshint: {
            files: ["app/**/*.js"]
        }
    });

    grunt.loadNpmTasks("grunt-contrib-jshint");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-contrib-connect");

    grunt.registerTask("default", ["connect", "watch"]);
};

【讨论】：