Question

Beginning with Grunt, which I love but cannot make it work as I get continously an error with my sass implementation. I get the following alerts:

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$ 

If I --force I get the following:

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$ 

This is my 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']);

};

Any ideas?

Was it helpful?

Solution

Yes, what you've done is put the entire Sass configuration inside the watch config. Grunt does not work this way. Instead, change your config to something like this:

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']);

};
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top