css

Mickael Daniel edited this page Apr 7, 2012 · 1 revision

» Home

» Tasks


» clean: Wipe the previous build dirs.

» mkdirs: Prepares the build dirs.

» concat: Concatenate files. (built-in)

» css: Concats, replaces @imports and minifies CSS files.

» min: Minify files using UglifyJS (built-in)

» rev: Automate the revving of assets and perform the hash rename

» usemin: Replaces references to non-minified scripts / stylesheets


» serve: Spawns up a basic local http server

» connect: livereload version of serve task

Clone this wiki locally

Task - css

The css tasks will handle stylesheets optimizations. These optimizations include:

  • CSS @import statements inlining (borrowed to r.js)
  • CSS minification (through CSSMin, todo consider using sqwish, probably through grunt-css)

Here's the basic configuration:

css: {
  'publish/css/style.css': [ 'css/style.css' ]
},

Just as the concat / min task, the config subprop is used as the destination files, any expanded files in the config subprob value will be optimized and concat'd into the destination file.

The css task works pretty much the same as grunt's min task. The task target is the destination, data is an array of glob patterns. These files are concataned and run through requirejs optimizer to handle @import inlines in CSS files.

Helpers

mincss

mincss basic utility to concat CSS files and run them through cleanCSS, might opt to use [https://github.com/jzaefferer/grunt-css] plugin. Takes an array of files to concat and minified. The minificaton only happens if the options.nocompress value is not set to true (default is false)

var css = task.helper('mincss', files, options));

rjs:optimize:css

rjs:optimize:css is an helper using rjs to optimize a single file, mainly to properly import multi-level of @import statements, which can be tricky with all the url rewrites.

file - Path to the css file to optimize options - (optional) rjs configuration cb - callback function to call on completion

task.helper('rjs:optimize:css', cssIn, this.async());