Compile, Concatenate and Minify Sass files with Grunt

Question

I'm building a sizable JS application using angularjs, and I'm using Grunt to process everything into a compact distribution. I can't figure out what to use to compile, concat and minify my .scss files into one single css file.

My project is organized by modules, so the .scss files are scattered, rather than grouped in a single directory.

I've looked at grunt-contrib-sass and grunt-contrib-compass, but they both seem to require you to individually specify files to compile. I'm looking for a solution that won't have to change when I add source files.

What Grunt plugin can I use to compile, concat and minify my sass files into a single css file?

I'm currently using concat and recess to concat and minify my plain css files:

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

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

You should be able to do it with recess by adding paths to the files array — megawac
grunt-recess claims to be for css and less: Lint and minify CSS and LESS. Does it work with sass too? — Chaseph
grunt-sass or grunt-contrib-sass depending upon your needs (grunt-sass uses lib-sass). — steveax

Slawa Eremin Slawa Eremin · Accepted Answer · 2014-01-16T09:12:50

I think a documentation about patterns can help you.

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

Compile, Concatenate and Minify Sass files with Grunt

1 Answers