将 node-sass 监视选项与 grunt-sass 一起使用答案

【问题标题】：Using node-sass watch option with grunt-sass将 node-sass 监视选项与 grunt-sass 一起使用
【发布时间】：2018-08-23 12:27:00
【问题描述】：

如何配置 grunt-sass 以使用底层 node-sass 监视选项来监视更改？

我知道我可以使用 grunt-contrib-watch 实现相同的功能来监视更改并重新运行 grunt-sass 任务，但这会更慢，因为它会重新编译整个事情而不是只编译更改。

谢谢！

【问题讨论】：

标签： sass gruntjs node-sass

【解决方案1】：

回答我自己的问题，以防万一这对其他人有帮助：

我发现解决这个问题的唯一方法是通过 grunt 使用 node-sass CLI。为此，请安装令人惊叹的 grunt-exec 任务并将其设置为运行带有 --watch 选项的命令。

使用示例（支持多个 includePath 目录）：

exec: {
   nodeSass: {
      cmd: function() {
         // Include path option string built from the gruntConfig.cssFiles array.
         var includeFilesOption = gruntConfig.cssFiles.map(function(cssFilePath) {
            return '--include-path ' + cssFilePath;
         }).join(' ');

         return 'node-sass app/scss/style.scss app/generated/style.css' + includeFilesOption + ' --watch';
      }
   }
}

您还需要通过 npm 安装 node-sass。在这种情况下，您只需将以下内容添加到您的 package.json 文件中：

"scripts": {
   "install": "npm install node-sass -g"
},

【讨论】：

顺便说一句，这还有其他好处。使用 grunt-contrib-watch 运行 grunt-compass 不仅速度较慢而且会生成一个新的 css 文件，而这个方案只更新 css 文件。结果是通过 livereload 选项进行软更新，而不是完全重新加载页面。