使用Grunt编译,连接和缩小Sass文件

时间:2014-01-16 06:34:53

标签: javascript sass gruntjs

我正在使用angularjs构建一个相当大的JS应用程序,我正在使用Grunt将所有内容处理成一个紧凑的发行版。我无法弄清楚用什么来编译,连接和缩小我的.scss文件到一个单独的css文件。

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

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

我可以使用什么Grunt插件将我的sass文件编译,连接并缩小为单个css文件?

我目前正在使用concat和凹进来连接和缩小我的普通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
    }
  }
}

1 个答案:

答案 0 :(得分:3)

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

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