gulpのプラグインを利用して、メディアクエリの記述をひとまとめにしたいです。

Question

現在、Gulpのプラグイン導入を試みているのですが、
うまく導入ができず非常に困っています。

具体的に導入したい内容としましては、

★sassで記述したメディアクエリ をまとめて記述する方法

を導入したいです。

pleeeaseやgulp-group-css-media-queriesをインストールするところまではできるのですが、
実際に、scssファイルにメディアクエリを記述しても、
cssファイルに整頓されたものが反映されず、困っております。

ファイルの構造は
sass
┠style.css
┠style.min.css
┗style.scss
index.html
gulpfile.js
package.json
yarn.lock

です。

★VScodeのeasysassを利用しているため、scss→cssのコンパイルは自動で行われます。

★参考にした記事はこちらです。
https://sakic.jp/blog/web/gulp-pleeease

★gulpfileとpackage.jsonのファイルをスクリーンショットで添付しています。

もしおわかりの点＆お気づきの点がありましたら、ご協力願えませんでしょうか。
何卒、よろしくお願いいたします。

Answer 1

css-mqpackerは使ったことなかったのでちょっと試してみました。
・gulp_task()メソッドは非推奨(そのうちなくなる？)なので使っていません。
・コピー元、コピー先のフォルダー構成は私のテスト環境です。
・コピーの前に、del()メソッドでコピー先を一旦削除(ゴミ掃除)してます。(clean_cssタスク)
・コンパイルタスク(compile_sass)と削除タスク(clean_css)をseries()メソッドで直列処理してます。

const {src, dest, series} = require('gulp');
const del = require('del');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const mqpacker = require('css-mqpacker');

const clean_css = async function () {
    await del('./stylesheets/**/*', { cwd: './public/development' });
};

const compile_sass = function () {
    return src('./stylesheets/**/*.scss', { cwd: './public/source' })
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(postcss([mqpacker()]))
        .pipe(dest('./stylesheets', { cwd: './public/development' }));
};

module.exports = series(clean_css, compile_sass);

テスト用のSCSSです。 (./public/source/stylesheets/test.scss)

div.box1{
    font-size: 38px;
    @media only screen and (max-width: 1216px){
        font-size: 35px;
    }
    @media only screen and (max-width: 980px){
        font-size: 28px;
    }
    @media only screen and (max-width: 768px){
        font-size: 26px;
    }
}

div.box2{
    margin-bottom: 100px;
    @media only screen and (max-width: 1216px){
        margin-bottom: 80px;
    }
    @media only screen and (max-width: 980px){
        margin-bottom: 50px;
    }
    @media only screen and (max-width: 768px){
        margin-bottom: 30px;
    }
}

コピー先にこんな実行結果のCSSができました。 (./public/development/stylesheets/test.css)

div.box1 {
  font-size: 38px;
}

div.box2 {
  margin-bottom: 100px;
}

@media only screen and (max-width: 1216px) {
  div.box1 {
    font-size: 35px;
  }
  div.box2 {
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 980px) {
  div.box1 {
    font-size: 28px;
  }
  div.box2 {
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 768px) {
  div.box1 {
    font-size: 26px;
  }
  div.box2 {
    margin-bottom: 30px;
  }
}

圧縮指定するとこんな感じになりました。(outputStyle: 'compressed')

div.box1{font-size:38px}div.box2{margin-bottom:100px}@media only screen and (max-width: 1216px){div.box1{font-size:35px}div.box2{margin-bottom:80px}}@media only screen and (max-width: 980px){div.box1{font-size:28px}div.box2{margin-bottom:50px}}@media only screen and (max-width: 768px){div.box1{font-size:26px}div.box2{margin-bottom:30px}}

よろしかったら参考にしてください。