javascript - Grunt 'watch' 命令不起作用

Question

当我在终端中运行 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' ]);

Answer 1

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

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

在我看来，您问题下的评论中关于创建名为 watchfiles 的任务的建议并不是一个好的建议。该建议是提倡过于通用的任务命名，不能描述任务的用途，并创建一个完全不必要的额外层。

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