javascript - Compile, Concatenate and Minify Sass files with Grunt - Stack Overflow

admin管理员组

文章数量:1025208

I'm building a sizable JS application using angularjs, and I'm using Grunt to process everything into a pact distribution. I can't figure out what to use to pile, 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-pass, but they both seem to require you to individually specify files to pile. I'm looking for a solution that won't have to change when I add source files.

What Grunt plugin can I use to pile, 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: {
      press: true
    }
  }
}

I'm building a sizable JS application using angularjs, and I'm using Grunt to process everything into a pact distribution. I can't figure out what to use to pile, 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-pass, but they both seem to require you to individually specify files to pile. I'm looking for a solution that won't have to change when I add source files.

What Grunt plugin can I use to pile, 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: {
      press: true
    }
  }
}

• javascript
• sass
• gruntjs

Share Improve this question Follow asked Jan 16, 2014 at 6:34 ChasephChaseph 1,91333 gold badges1616 silver badges2020 bronze badges 3

• You should be able to do it with recess by adding paths to the files array – megawac Commented Jan 16, 2014 at 6:39
• grunt-recess claims to be for css and less: Lint and minify CSS and LESS. Does it work with sass too? – Chaseph Commented Jan 16, 2014 at 6:42
• grunt-sass or grunt-contrib-sass depending upon your needs (grunt-sass uses lib-sass). – steveax Commented Jan 16, 2014 at 7:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I think a documentation about patterns can help you.

http://gruntjs./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/
  }
}

I'm building a sizable JS application using angularjs, and I'm using Grunt to process everything into a pact distribution. I can't figure out what to use to pile, 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-pass, but they both seem to require you to individually specify files to pile. I'm looking for a solution that won't have to change when I add source files.

What Grunt plugin can I use to pile, 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: {
      press: true
    }
  }
}

I'm building a sizable JS application using angularjs, and I'm using Grunt to process everything into a pact distribution. I can't figure out what to use to pile, 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-pass, but they both seem to require you to individually specify files to pile. I'm looking for a solution that won't have to change when I add source files.

What Grunt plugin can I use to pile, 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: {
      press: true
    }
  }
}

• javascript
• sass
• gruntjs

Share Improve this question Follow asked Jan 16, 2014 at 6:34 ChasephChaseph 1,91333 gold badges1616 silver badges2020 bronze badges 3

• You should be able to do it with recess by adding paths to the files array – megawac Commented Jan 16, 2014 at 6:39
• grunt-recess claims to be for css and less: Lint and minify CSS and LESS. Does it work with sass too? – Chaseph Commented Jan 16, 2014 at 6:42
• grunt-sass or grunt-contrib-sass depending upon your needs (grunt-sass uses lib-sass). – steveax Commented Jan 16, 2014 at 7:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I think a documentation about patterns can help you.

http://gruntjs./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/
  }
}

本文标签： javascriptCompileConcatenate and Minify Sass files with GruntStack Overflow