[Grunt & Yeoman] grunt-contrib-cssmin で css ファイルの結合・圧縮をする

grunt-contrib-cssmin で、css を minify する。

[markdown]
> * [gruntjs/grunt-contrib-cssmin · GitHub](https://github.com/gruntjs/grunt-contrib-cssmin)

## インストール

“`prettyprinted
% npm install grunt-contrib-cssmin –save-dev
“`

## Gruntfile

下記で、タブインデント・改行を除き、圧縮する。
grunt.initConfig の一部のみ抜粋。

“`
banner: ‘/*! <%= pkg.name %> <%= pkg.version %>\n’+
‘<%= grunt.template.today("yyyy-mm-dd HH:MM:ss Z") %> */\n’
# grunt-contrib-cssmin
cssmin:
options:
banner: ‘<%= banner %>‘
report: ‘gzip’
build:
files: [
src: ‘<%= pkg.path.src %>/stylesheets/*.css’,
dest: ‘<%= pkg.path.dist %>/stylesheets/<%= pkg.name %>.min.css’
]
“`

Sass/Compass の機能とかぶる部分もあるので、タスクを切り分けることも必要。

> * [Gruntで快適な環境を整備したい！【タスク記述編】 » RIAxDNP](http://www.riaxdnp.jp/?p=4736)
> * [Gruntで始めるWeb制作の自動化 – to-R](http://blog.webcreativepark.net/2013/08/28-010250.html)

### banner

ファイルの始めにコメントを追加する（上記の通り）。

“`
/*! gruntSample 0.0.1
2013-11-25 21:10:19 GMT+0900 */
“`

### report

ファイルを minify, gzip した場合のサイズを教えてくれる。

“`prettyprinted
% grunt cssmin
Running “cssmin:build” (cssmin) task
File ./dist/stylesheets/gruntSample.min.css created.
Original: 9881 bytes.
Minified: 2765 bytes.
Gzipped: 740 bytes.
Done, without errors.
“`

gzip などへのarchive化は、別途 grunt-contrib-compress を使う。

> * [gruntjs/grunt-contrib-compress · GitHub](https://github.com/gruntjs/grunt-contrib-compress)
> * [Grunt: JavaScript や CSS を gzip する | deadwood](https://www.d-wood.com/blog/2013/12/03_5071.html)

## 補遺

htmlmin もあるよう。

> * [gruntjs/grunt-contrib-htmlmin · GitHub](https://github.com/gruntjs/grunt-contrib-htmlmin)
[/markdown]