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

目次

[chat face=”ハテナの人1.jpg” name=”” align=”left” border=”gray” bg=”none” style=””]
「納品時のcssはメディアクエリをひとまとめにしてほしい」
というお客さんからの要望があったよ。

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

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

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

私は単純にcss-mqpackerのタスクを書く順番が問題でした・・・(^o^)
[box04 title=”前提”]

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

[/box04]

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

npm i -D css-mqpacker

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

gulpfile.jsをいじる

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

 const gulp = require('gulp');
 const cached = require('gulp-cached');
 const plumber = require('gulp-plumber');
 const postcss = require(gulp-postcss');
 const sass = require('gulp-sass');
 const sassGlob = require("gulp-sass-glob");
 const cleanCSS = require('css-mqpacker');

中略

gulp.task('sass', () => {
  return gulp.src(filePattern.sass, { base: baseDir.src })
   .pipe(plumber())
   .pipe(sassGlob())
   .pipe(sass(sassArgs))
   .pipe(postcss([  //メディアクエリをまとめるプラグイン 不要ならコメントアウト
     require('css-mqpacker')(),
   ]))
   .pipe(postcss([
     require('autoprefixer')({
        cascade: false
      })
   ]))
   .pipe(gulp.dest(baseDir.dist));
  });

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

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

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

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

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

ではまとめです。
[box02 title=”gulpでcssのメディアクエリをまとめるには”]

  1. css-mqpackerをインストール
  2. gulpfile.jsにcss-mqpackerの記述を書く
  3. sassの後、autoprefixerの後ろに書くこと

[/box02]

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