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日星期二11:25:11在0.949s完成   GMT + 0100（CET） - 等待......

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

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

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时没有任何事情发生..

编辑：这是我答案后的grunt文件：

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 watch将监视单个组件 sass / scss文件中的更改，然后它将运行sass任务，该任务将处理所有内容到{{ 1}}。

如果您只使用1个Sass文件，即dist/main.css是您唯一的文件，或者如果您要在同一目录中添加其他main.scss Sass文件，则可以保留看命令为

_partial.scss

最后一件事。您的Sass文件的watch: { files: ['src/*.scss'], tasks: ['sass'] } cwd不会延续到您为src/指定的files。因此，您的Gruntfile在第二个工作流程中查找文件更改watch上方的目录。

Answer 2

您需要指定输出：

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

注意grunt-sass也应支持所有standard configuration options。

使用原始配置，任务已成功运行，但未找到任何要处理的文件。如果我使用grunt --debug --verbose运行，我会：

[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]

我想你可以认为这是grunt-sass中的一个错误。

Answer 3

在您的问题中，grunt watch未在第二个grunt任务配置中触发的原因是由于正在监视的文件路径错误。

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

这只会监视项目根目录中的所有.scss个文件（不在 src 之类的任何文件夹中）。您需要设置files监视路径，与问题中的第一个grunt任务配置相同，并且它应该可以正常工作

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

注意：如果src文件夹下包含.scss个文件的子文件夹，则您需要将模式更改为src/**/*.scss 39; s files数组和src: ['**/*.scss'] files对象中的files

同样在第二个grunt配置中，sass任务的dest对象.选项设置为src。这将在项目的根目录中生成CSS文件。要在src或其他文件夹中生成它们，请相应指定

您可以在https://github.com/pra85/grunt-sass-example查看工作示例（检查subfolder分支以处理包含SASS文件的WebDriver中嵌套文件夹的情况）

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

3 个答案: