Grunt 'watch' 命令不起作用答案

【问题标题】：Grunt 'watch' command not workingGrunt 'watch' 命令不起作用
【发布时间】：2015-03-24 18:48:29
【问题描述】：

当我在终端中运行 grunt watch 任务时，它似乎在我修改文件时没有发现任何更改。

我不确定这是我的文件结构还是Gruntfile.js 中的配置。谁能告诉我我做错了什么？

   sass: {
        dist: {
            options: {
                style: 'compressed',
                require: 'susy'
            },
            files: {
                'app/styles/css/main.css': 'app/styles/sass/main.scss'
            }
        }
    },

    css: {
        files: ['css/*.scss'],
        tasks: ['sass'],
        options: {
            spawn: false,
        }

    },
     watch: {

        css: {
            files: 'app/styles/sass/*.scss',
            tasks: ['sass'],
            options: {
                livereload: true,
            },
        }

    }

});


grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sprite-generator');
grunt.registerTask('watchfiles', ['sass',  'watch' ]);

【问题讨论】：

你在命令行输入grunt watchfiles或grunt watch？
@KJPrice 是的，我忘了说
好吧，我认为livereload 需要根据documentation 进入options 参数下。另外，我会确保这是您的 css“app/styles/css/”的正确路径。
@KJPrice 烦人，当我对我的 sass 文件进行更改时，我仍然没有看到终端中发生的操作
试试grunt.registerTask('watchfiles', ['sass', 'watch:css' ]);

标签： javascript node.js gruntjs grunt-contrib-watch

【解决方案1】：

假设您希望 watch 监听 atom 子目录中 .scss 文件的更改，请在 watch css 任务配置中将 files: 'app/styles/sass/*.scss' 更改为 files: 'app/styles/sass/**/*.scss'

现在您只在查看扩展名为 .scss 的文件，这些文件也是您的 sass 目录的直接子级。添加两个星号 **/*.scss 告诉 grunt-contrib-watch 你想递归地查看 sass 目录子目录中所有带有扩展名 .scss 的文件。

在我看来，您问题下的 cmets 中创建一个名为 watchfiles 的任务的建议不是一个好建议。该建议是促进任务命名过于通用且不描述任务的作用，并创建一个根本不必要的额外层。

为了消除任何其他增加不确定性的层，在测试这是否有效时，通过在与Gruntfile.js 相同的目录中运行命令grunt watch:css 直接调用watch:css 任务，进行更改并观察结果。

【讨论】：