grunt-contrib-watch + sass:如何指定目标文件？

Question

我有这个工作流程:

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

};

运行grunt watch并更改src/*.scss文件后,我得到:

文件"src/main.scss"已更改.运行"sass:dist"(sass)任务

完成,没有错误.2016年2月2日星期二02:25:11 GMT + 0100(CET)完成0.949秒 - 等待...

我的问题:生成的文件在哪里？如何指定目标文件？

我也尝试过使用这个工作流程:

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

};

并且还在运行grunt watch,但是当我改变src/*.scss什么都没发生..

编辑:这是答案后的我的咕噜文件:

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

假设您有一个main.scss文件，该@import文件位于文件夹_sassfile.scss中layout。听起来不错？

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

这意味着将监视各个组件grunt watchsass/scss 文件中的更改，然后它将运行该任务，该任务会将所有内容处理为.sassdist/main.css

如果您仅使用 1 个 Sass 文件（即，这main.scss是您唯一的文件），或者如果您将其他_partial.scssSass 文件放在同一目录中，则可以将 watch 命令保留为

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

最后一件事。cwd您的 Sass 文件的不会src/延续到files您指定的watch. 因此，您的 Gruntfile 正在第二个工作流程中的上述目录中查找文件更改src/。