Grunt“watch.sass.files”失踪了

Question

从Grunt开始，我很喜欢但无法使其工作，因为我的sass实现不断出现错误。我收到以下警告：

Danis-MacBook-Pro:020 DanielRamirez$ grunt
Running "concat:dist" (concat) task
File "js/build/production.js" created.

Running "uglify:build" (uglify) task
File js/build/production.min.js created.
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.

Aborted due to warnings.
Danis-MacBook-Pro:020 DanielRamirez$ 

如果我--force我得到以下内容：

Danis-MacBook-Pro:020 DanielRamirez$ grunt
Running "concat:dist" (concat) task
File "js/build/production.js" created.

Running "uglify:build" (uglify) task
File js/build/production.min.js created.
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.

Aborted due to warnings.
Danis-MacBook-Pro:020 DanielRamirez$ 

这是我的Gruntfile.js：

module.exports = function(grunt) {

    // 1. All configuration goes here
    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        // 2. Configuration for concatinating files goes here.

        // Concatonate various files into one
        concat: {
            dist: {
                src: [
                    'js/vendor/*.js', // All JS in the libs folder
                    'js/plugin.js', // All JS in the libs folder
                    'js/global.js'  // This specific file
                ],
                dest: 'js/build/production.js',
            }
        },

        // Creates a minified version of the javascript files of the project
        uglify: {
            build: {
                src: ['js/vendor/*.js', 'js/plugin.js', 'js/global.js'],
                dest: 'js/build/production.min.js'
            }
        },

         // Minifies automatically the images of the project
        // imagemin: {
        //     dynamic: {
        //         files: [{
        //             expand: true,
        //             cwd: 'images/',
        //             src: ['**/*.{png,jpg,gif}'],
        //             dest: 'images/build/'
        //         }]
        //     }
        // },

        // Watches for changes done on the project and builds the commands if neccesary
        watch: {

             options: {
                livereload: true,
            },

            scripts: {
                files: ['js/*.js'],
                tasks: ['concat', 'uglify'],
                options: {
                    spawn: false,
                },
            },

            sass: {
                dist: {
                    options: {
                        style: 'compressed'
                    },
                    files: {
                        'css/build/style.css': 'sass/style.scss'
                    }
                }
            },

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

    });

    // 3. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'uglify', 'sass', 'compass', 'watch']);

};

有什么想法吗？

Answer 1

是的，你所做的是将整个Sass配置放在watch配置中。 Grunt不会这样工作。相反，将配置更改为以下内容：

module.exports = function(grunt) {

    // 1. All configuration goes here
    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        // 2. Configuration for concatinating files goes here.

        // Concatonate various files into one
        concat: {
            dist: {
                src: [
                    'js/vendor/*.js', // All JS in the libs folder
                    'js/plugin.js', // All JS in the libs folder
                    'js/global.js'  // This specific file
                ],
                dest: 'js/build/production.js',
            }
        },

        // Creates a minified version of the javascript files of the project
        uglify: {
            build: {
                src: ['js/vendor/*.js', 'js/plugin.js', 'js/global.js'],
                dest: 'js/build/production.min.js'
            }
        },
        // Compile sass to css
        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'css/build/style.css': 'sass/style.scss'
                }
            }
        },

         // Minifies automatically the images of the project
        // imagemin: {
        //     dynamic: {
        //         files: [{
        //             expand: true,
        //             cwd: 'images/',
        //             src: ['**/*.{png,jpg,gif}'],
        //             dest: 'images/build/'
        //         }]
        //     }
        // },

        // Watches for changes done on the project and builds the commands if neccesary
        watch: {

             options: {
                livereload: true,
            },

            scripts: {
                files: ['js/*.js'],
                tasks: ['concat', 'uglify'],
                options: {
                    spawn: false,
                },
            },

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

    });

    // 3. Where we tell Grunt we plan to use this plug-in.
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
    grunt.registerTask('default', ['concat', 'uglify', 'sass', 'compass', 'watch']);

};