使用 Grunt 编译、连接和缩小 Sass 文件答案

【问题标题】：Compile, Concatenate and Minify Sass files with Grunt使用 Grunt 编译、连接和缩小 Sass 文件
【发布时间】：2014-02-04 22:49:23
【问题描述】：

我正在使用 angularjs 构建一个相当大的 JS 应用程序，并且我正在使用 Grunt 将所有内容处理成一个紧凑的分布。我不知道用什么来编译、连接和缩小我的 .scss 文件到一个 css 文件中。

我的项目是按模块组织的，所以 .scss 文件是分散的，而不是分组在一个目录中。

我查看了 grunt-contrib-sass 和 grunt-contrib-compass，但它们似乎都要求您单独指定要编译的文件。我正在寻找一种在添加源文件时无需更改的解决方案。

我可以使用什么 Grunt 插件将我的 sass 文件编译、合并和缩小为单个 css 文件？

我目前正在使用 concat 和 Recess 来连接和缩小我的纯 css 文件：

concat: {
  css: {
    src: ['<%= src.css %>'],
    dest: '<%= distdir %>/<%= pkg.name %>.css'
  },
},

recess: {
  min: {
    files: {
      '<%= distdir %>/<%= pkg.name %>.css': ['<%= distdir %>/<%= pkg.name %>.css']
    },
    options: {
      compress: true
    }
  }
}

【问题讨论】：

您应该可以通过将路径添加到 files 数组来使用 recess 完成此操作
grunt-recess 声称适用于 css 和 less：Lint 和缩小 CSS 和 LESS。它也适用于 sass 吗？
grunt-sass 或 grunt-contrib-sass 取决于您的需要（grunt-sass 使用 lib-sass）。

标签： javascript sass gruntjs

【解决方案1】：

我认为有关模式的文档可以帮助您。

http://gruntjs.com/configuring-tasks#globbing-patterns

sass: {                              // Task
  dist: {                            // Target
    options: {                       // Target options
      style: 'expanded'
    },
    src: 'foo/{a,b}*.sass',    // you can use some kind of regular expression
    dest: 'foo/css/
  }
}

【讨论】：