Grunt "watch.sass.files" missing - terminal

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?

Answer 1

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