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 文件之后，我得到这个：

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

完成，没有错误。 2016 年 2 月 2 日星期二在 0.949 秒内完成 11:25:11 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

您需要指定一个输出：

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.

使用您的原始配置，任务运行成功但未找到任何要处理的文件。如果我运行和 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 2

假设您有一个 main.scss 文件，并且 layout 文件夹中有来自 _sassfile.scss 的 @import。听起来不错？

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 任务，它将处理所有内容 dist/main.css.

如果您只使用 1 个 Sass 文件，也就是说，main.scss 是您唯一的文件，或者如果您要放置额外的 _partial.scss Sass 文件相同的目录，你可以将 watch 命令保持为

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

最后一件事。 Sass 文件的 cwd，src/ 不会转移到您为 watch 指定的 files。因此，您的 G运行tfile 在第二个工作流程中寻找 src/ 以上目录的文件更改。

Answer 3

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

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

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

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

注意： 如果 src 文件夹下有包含 .scss 个文件的子文件夹，那么您需要将模式更改为 src/**/*.scss 在手表的 files 数组中和 src: ['**/*.scss'] 在 sass 的 files 对象

中

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

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

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

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

gruntjs

grunt-contrib-watch