Programming

【gulp】css-mqpacker が効かない時【メディアクエリをまとめてコンパイルしたい】

「納品時のcssはメディアクエリをひとまとめにしてほしい」
というお客さんからの要望があったよ。

開発時はプロパティ毎にメディアクエリを書いてるんだけど。。。
調べたら『css-mqpacker』を使えば良さそう!

・・・やってみたけど、うまく動かない!!どうして!!

そんなあなたに解決法をご紹介します。
gulpが思い通りに動かなかったのは、もしかしたらgulpfile.jsの書き方を疑ってみてください。

私は単純にcss-mqpackerのタスクを書く順番が問題でした・・・(^o^)

前提
  • 普段からgulpを使っている
  • gulp-postcssがインストールしてある
  • css-mqpackerを新たにインストールした

css-mqpackerをインストールする


ターミナルを開いて、ディレクトリを作業ファイルまで移動します。
そしてcss-mqpackerをインストールしましょう。
コマンドは上記の通りです。

gulpfile.jsをいじる

インストールできたら、fulpfile.jsに記述していきます。

※少し省略している部分があります。だいたい皆さん同じようなプラグインを入れたりしているかと思います。

gulpタスクの記述の順番に注意【autoprefixerより前に書こう】

既存のgulpfile.jsに追記する形となるので、のタスクも下に追加すれば良いかなと思っていたのですが、
そうするとちゃんとコンパイルされませんでした

.pipe(sass())~~~~のすぐ後、autoprefixerの前に記述する点に注意です。

まとめ‖タスクを記述する順番に注意

ではまとめです。

gulpでcssのメディアクエリをまとめるには
  1. css-mqpackerをインストール
  2. gulpfile.jsにcss-mqpackerの記述を書く
  3. sassの後、autoprefixerの後ろに書くこと

『CSSファイルのメディアクエリの記述はまとめて納品してね☆』と要望があった際はcss-mqpackerをインストールして、
gulpfile.jsの記述順に注意してコンパイルさせてくださいね(^o^)/