咕unt的“监视”命令不起作用

Question

When I run the grunt watch task in my terminal, it doesn't seem to be picking up any changes when I modify files.

I'm not sure if it's my file structure or the configuration in my Gruntfile.js . Can anyone let me know what I have done wrong?

   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

Assuming you want watch to listen for changes to the .scss files in the atoms subdir, in your watch css task config change files: 'app/styles/sass/*.scss' to files: 'app/styles/sass/**/*.scss'

Right now you are only watching files with the extension .scss which are also immediate children of your sass directory. Adding the two asterisks **/*.scss tells grunt-contrib-watch that you want to watch all of the files with the exention .scss in the sass dirs subdirs recursively.

The suggestion in the comments under you question to create a task called watchfiles is not a good one, in my opinion. That suggestion is to promote task naming which is overly generic and not descriptive of what the task does, and creates an extra layer which is simply unnecessary.

To eliminate any other layers, which add uncertainty, when testing whether this works or not, invoke the watch:css task directly by running the command grunt watch:css in the same directory as your Gruntfile.js , make changes, and observe results.