grunt-contrib-watch + sass: how to specify the 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 change a src/*.scss file, I get this:

File "src/main.scss" changed. Running "sass:dist" (sass) task

Done, without errors. Completed in 0.949s at Tue Feb 02 2016 11:25:11 GMT+0100 (CET) - Waiting...

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

I have also tried it 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 running also grunt watch, 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

Let's assume you have a main.scss file and that @import's from _sassfile.scss in a layout folder. Sound 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 grunt watch will monitor for changes in the individual component sass/scss files, then it will run the sass task, which will process everything out to dist/main.css.

If you are just using 1 Sass file, that is, main.scss is your only file, or if you're putting additional _partial.scss Sass files in the same directory, you can keep your watch command as

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

Last thing. The cwd for your Sass files, src/ won't carry over to the files you specify for watch. So your Gruntfile was looking for file changes a directory above src/ in the second workflow.

Answer 2

You need to specify an 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 should support all the standard configuration options too.

With your original configuration, the task ran successfully but it didn't find any files to process. 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 guess you could consider this a bug in grunt-sass.