Grunt - Watch Task无效

Question

It seems like my watch task in my project grunt file is starting up then quitting straight away.

Please review the screenshot attached.

Please find the code for my Gruntfile.js;

module.exports = function (grunt) {

    grunt.initConfig({
        sass: {
            options: {
                cacheLocation: '.sass-cache'
            },
            prod: {
                options: {
                    style: 'compressed'
                },
                files: [{
                    'assets/css/dist/main.min.css': 'assets/css/sass/main.scss'
                }]
            },
            dev: {
                options: {
                    style: 'nested'
                },
                files: [{
                    'assets/css/main.css': 'assets/css/sass/main.scss'
                }]
            }
        },
        imageoptim: {
          files: [
            'img/flat',
            'img/flat/**'
          ],
          options: {
            imageAlpha: true,
            jpegMini: true,
            quitAfter: true
          }
        },
        uglify: {
            options: {
              mangle: true,
              compress: true
            },
            jsCompress: {
                files: {
                    'js/dist/main.min.js': ['js/src/script1.js', 'js/src/script2.js']
            }
          }
        },
        concat: {
            options: {
                separator: ';',
          },
          dist: {
                src: ['js/src/script1.js', 'js/src/script2.js'],
                dest: 'js/dist/main.min.js',
          }
        },
        watch: {
            sassWatch: {
                files: 'css/sass/**/*.scss',
                tasks: ['sass:prod', 'sass:dev'],
            },
            JsWatch: {
                files: ['js/modules/script1.js', 'js/modules/script2.js'],
                tasks: ['uglify:jsCompress', 'concat:dist'],
            }
        },
        notify: {
            sassNotify: {
                options: {
                    title: "Task Complete",
                    message: "Your Sass has been compiled and concatanatated!"
                }
            },
            jsNotify: {
                options: {
                    title: "Task Complete",
                    message: "Your JS has been minified and concatanatated!"
                }
            },
            imageNotify: {
                options: {
                    title: "Task Complete",
                    message: "All images have been compressed"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-imageoptim');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-notify');

    grunt.registerTask('sassNotify', 'watch:sassWatch');
    grunt.registerTask('jsNotify', 'watch:jsWatch');
    grunt.registerTask('imageNotify', 'imageoptim');

};

Does anyone have an idea why this is happening?

Kind Regards,

B!

Answer 1

我的问题是，它正在观看我有100多个图像文件，它正在跟踪，所以我只是指定它应该看什么（js，html，scss，css）。

Answer 2

I noticed this was not working as expected with an older version of grunt-contrib-watch . In my case, I was using grunt-contrib-watch V0.4.4.

Try updating the grunt-contrib-watch package to the latest version, by running:

npm install grunt-contrib-watch@latest --save-dev 

and then try execute your task again.

Answer 3

I ran into the issue and was looking for an answer. In my case I had a typo in my files: matching pattern which caused it to not find the directory to watch and abort, although an error message would have been nice. I notice that in your sass task you prepend your files with assets/ but not in your watch task.

I understand you've likely moved on but hopefully this helps someone in the future.

Answer 4

Try something like

   ....

    watch: {
        dev: {
            files: 'assets/sass/**/*{.scss,.js}',
            tasks: ['sass:dev','uglify:jsCompress'],
        },

    },

    ...

});

grunt.registerTask('dev', 'watch:dev');

The watch task in my gruntfile may be helpful.

Answer 5

Here is how my Gruntfile.js looks like and it works ok:

module.exports = function(grunt) {

    grunt.initConfig({
        sass: {                              // Task
            dist: {                            // Target
                options: {                       // Target options
                    style: 'expanded'
                },
                files: {                         // Dictionary of files
                    'css/styles.css': './sass/site.scss'
                }
            }
        },
        watch: {
            sass: {
                files: ['sass/**/*.scss'],
                tasks: ['sass']
            },
            organic: {
                files: ['../organic-css/**/*.scss'],
                tasks: ['sass']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', ['sass', 'watch']);

}

Maybe you need to register a "default" tasks.