Question

我有以下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文件？

Answer 1

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

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

有趣的是，当凝视向watched对象添加文件路径时，它会查找该文件路径的所有目录，并且将这些目录添加到watched对象中< / EM>！

凝视源的相关代码如下：

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

这样做的结果就是当你的＆＃34; index.html＆＃34;在应用程序根目录中找到filepath，应用程序根目录中的所有目录（app /，bin /，bower_components /等）也会添加到watched对象中。

您可以通过删除＆＃34; index.html＆＃34;来确认这一点。从您的手表中，你不应再在详细输出中获得所有这些文件夹观察。

以下是关于为什么凝视库有这种行为的讨论的link。

至于为什么你的＆＃34; app.styles.css＆＃34;是未观看：您是否错过了此文件的路径。我没有看到＆＃34; app.styles.css＆＃34;在你的应用程序根目录大概是css/。

Answer 2

所以几个月后回到这个问题后，我终于想出了我需要做些什么才能让它发挥作用。在Gruntfile.js中，您需要在options: { livereload: true}属性中添加css。我不知道您在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"]);
};

为什么grunt-watch任务说它正在观看我未在配置中指定的文件/目录？

2 个答案: