javascript - 使用 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
    }
  }
}

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