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

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

目前您只能观看扩展名为.scss的文件，这些文件也是您sass目录的直接子项。添加两个星号**/*.scss告诉grunt-contrib-watch你想要以递归方式在sass dirs子目录中使用exention .scss观看所有文件。

在我看来，根据你提出的问题，建议一个名为watchfiles的任务的建议并不是一个好的建议。该建议是为了促进任务命名过于通用而不是描述任务的作用，并创建一个简单不必要的额外层。

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