メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」

CSSソース内に散らばったメディアクエリをまとめたいと思って調べたらGruntタスク「grunt-combine-media-queries」に行き当たりました。

CSSソース内に散らばったメディアクエリとはどういうことかというと、レスポンシブWebデザインでPC向けとSP向けのCSSを記述しなくてはいけないときに、以下のようにPC向けとSP向けの記述をなるべく近くに書くことでCSSのメンテナンス性が高まる反面、１つのCSSファイルに同様なメディアクエリが散らばってファイルサイズを増加させてしまいます。

.header{
	width:950px;
}
@media screen and (max-width: 640px) {
	.header{
		width:auto;
	}
}
.footer{
	width:950px;
}
@media screen and (max-width: 640px) {
	.footer{
		width:auto;
	}
}

これを解決するのが「grunt-combine-media-queries」です。

上記のCSSを以下のような形に変換してくれます。

.header{
	width:950px;
}
.footer{
	width:950px;
}
@media screen and (max-width: 640px) {
	.header{
		width:auto;
	}
	.footer{
		width:auto;
	}
}

Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。

grunt-combine-media-queriesのインストールは以下のコマンドです。

sudo npm install grunt-combine-media-queries --save-dev

grunt-combine-media-queriesはCSSのミニファイ機能がないので「grunt-contrib-cssmin」も合わせて利用します。

sudo npm install grunt-contrib-cssmin --save-dev

Gruntfile.jsの内容は以下のようにします。

module.exports = function(grunt) {
  grunt.initConfig({
    cmq: {
      dev: {
        files: {
          './': ['style.css']
        }
      }
    },
    cssmin: {
      combine: {
        files: {
          'style.css': ['style.css']
        }
      }
    },
  });
  grunt.loadNpmTasks('grunt-combine-media-queries');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  
  grunt.registerTask('release', ['cmq','cssmin']);
};

これでGruntをインストールしたフォルダで以下のコマンドを入力すると、style.cssからメディアクエリをまとめ、さらにミニファイされた「style.css」に変換してくれます。

grunt relase

注意点としては、grunt-combine-media-queriesでは書き出し先のファイル名は選べられずディレクトリしか選べられません。

Sass/CompassのようなCSSプリプロセッサを利用している場合は問題ありませんが、生のCSSをいじっている場合は必ずバックアップを取りましょう。

関連エントリー

Source MapでSass/Compassを簡単にCSSをデバッグする
CodeKitで簡単にCSS Preprocessorを利用する！
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
CompassでデータURI スキーム
CompassでCSSスプライト

スポンサードリンク

«Compassで書き出すCSSファイルを軽量化する | メイン | CSS Nite in SAPPORO, Vol.11 「実践！ スマートフォン対応サイト制作」に出演します»