,

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

公開日: 2013/11/28
更新日: 2019/09/19

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

Contents

インストール

% 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 の機能とかぶる部分もあるので、タスクを切り分けることも必要。

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

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

report

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

% 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 を使う。

補遺

htmlmin もあるよう。