Grunt-contrib-watch + sass: how to specify destination files?

Question

I have this workflow:

module.exports = function(grunt) { require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { } }, watch: { files: ['src/*.scss'], tasks: ['sass'] } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ["sass"]); }; 

After running grunt watch and changing the src/*.scss I get the following:

The file "src / main.scss" has been modified. Performing the sass: dist task (sass)

Done, no errors. Completed in 0.949s on Tue 02/02 2016 11:25:11 GMT + 0100 (CET) - Waiting ...

My problem: where is the generated file? How to specify the destination file?

I also tried using this workflow:

 module.exports = function(grunt) { require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: [{ expand: true, cwd: 'src', src: ['*.scss'], dest: '.', ext: '.css' }] } }, watch: { files: ['*.scss'], tasks: ['sass'] } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ["sass"]); }; 

and grunt watch also works, but when I change src/*.scss nothing happens.

EDIT : this is my grunt file after the answers:

 module.exports = function(grunt) { require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: [{ expand: true, cwd: '.', src: ['src/**/*.scss'], dest: '.', ext: '.css' }] } }, watch: { files: ['src/**/*.scss'], tasks: ['sass'] } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ["sass"]); }; 

Answer 1

Suppose you have a main.scss file and @import from _sassfile.scss in the layout folder. It sounds good?

 sass: { options: { sourceMap: true, outFile: 'dist/main.css.map' // so you get a sourceMap file }, dist: { files: { 'dist/main.css' : 'src/main.scss' } } }, watch: { files: ['src/layout/*.scss'], tasks: ['sass'] } 

This means that grunt watch will keep track of changes in individual sass / scss files for individual components, then it runs a sass task that will process everything up to dist/main.css .

If you use only one Sass file, i.e. main.scss is your only file, or if you add additional _partial.scss Sass files to the same directory, you can save the watch command as

 watch: { files: ['src/*.scss'], tasks: ['sass'] } 

Last thing. cwd for your Sass files, src/ does not migrate to the files you specify for watch . So your Gruntfile searched the file by changing the directory above src/ in the second workflow.

Answer 2

You need to specify the output:

 module.exports = function(grunt) { require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks grunt.initConfig({ sass: { options: { sourceMap: true }, dist: { files: { //output added here 'dist/main.css' : 'src/*.scss' } } }, watch: { files: ['src/*.scss'], tasks: ['sass'] } }); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ["sass"]); }; 

Note grunt-sass must support all standard configuration options too.

With your initial configuration, the task worked successfully, but did not process the files. If I run with grunt --debug --verbose , I get:

 [D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js Running "sass:dist" (sass) task [D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js Verifying property sass.dist exists in config...OK File: [no files] 

I think you could consider this error in grunt-sass .

Answer 3

The reason why the grunt watch does not work in the second task of the grunt task in your question is due to the incorrect viewing of the file path.

 watch: { files: ['*.scss'], tasks: ['sass'] } 

This monitors all .scss files present in the root of the project (not inside any folder, for example src ). You will need to set the files path to view in the same way as the 1st configuration of the grunt task in your question, and it should work

  watch: {
   files: [' src / * .scss'],
   tasks: ['sass']
 }

Note. . If there is a subfolder in the src folder containing the .scss files, you can change the template to src/**/*.scss in the watch files array and to src: ['**/*.scss'] in the sass files object

Also in the second grunt configuration, the files object dest parameter for the sass task is set to . . This creates CSS files at the root of the project. To generate them inside src or other folders, specify accordingly

You can check the working example https://github.com/pra85/grunt-sass-example (check the subfolder to handle the case of subfolders in src containing SASS files)