スポンサーリンク
｢納品時のcssはメディアクエリをひとまとめにしてほしい｣
というお客さんからの要望があったよ。
というお客さんからの要望があったよ。
開発時はプロパティ毎にメディアクエリを書いてるんだけど。。。
調べたら『css-mqpacker』を使えば良さそう！
･･･やってみたけど、うまく動かない！！どうして！！
そんなあなたに解決法をご紹介します。
gulpが思い通りに動かなかったのは、もしかしたらgulpfile.jsの書き方を疑ってみてください。
私は単純にcss-mqpackerのタスクを書く順番が問題でした･･･(^o^)
前提
- 普段からgulpを使っている
- gulp-postcssがインストールしてある
- css-mqpackerを新たにインストールした
スポンサーリンク
css-mqpackerをインストールする
|
1 |
npm i -D css-mqpacker |
ターミナルを開いて、ディレクトリを作業ファイルまで移動します。
そしてcss-mqpackerをインストールしましょう。
コマンドは上記の通りです。
gulpfile.jsをいじる
インストールできたら、fulpfile.jsに記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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の前』に記述する点に注意です。
まとめ‖タスクを記述する順番に注意
ではまとめです。
gulpでcssのメディアクエリをまとめるには
- css-mqpackerをインストール
- gulpfile.jsにcss-mqpackerの記述を書く
- sassの後、autoprefixerの後ろに書くこと
『CSSファイルのメディアクエリの記述はまとめて納品してね☆』と要望があった際はcss-mqpackerをインストールして、
gulpfile.jsの記述順に注意してコンパイルさせてくださいね(^o^)/
スポンサーリンク
