使用Grunt编译、合并和压缩Sass文件

Question

我正在使用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
    }
  }
}

- Chaseph

---

你应该可以通过将路径添加到“files”数组中，使用“recess”来完成它。 - megawac

grunt-recess声称适用于CSS和LESS：对CSS和LESS进行Lint和压缩。它也能与Sass一起使用吗？ - Chaseph

根据您的需求选择grunt-sass或grunt-contrib-sass（grunt-sass使用lib-sass）。 - steveax

Answer 1

我认为一份关于模式的文档可以帮助你。 http://gruntjs.com/configuring-tasks#globbing-patterns是一个关于Globbing模式的网页链接，这个网页可以告诉你更多有关如何配置Globbing模式的信息。

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/
  }
}

- Slawa Eremin