gulp-pleeeaseでcssのminify・autoprefix・mqpackをまとめて実行しよう【gulp4】

はじめに
gulp-pleeeaseのメリット
ディレクトリ構成
プラグインをインストールしよう
1. npm i -D gulp-pleeease
2. npm i -D gulp-plumber
gulpfile.jsを編集しよう
style.scssを編集しよう
コマンドを実行しよう
実行後のファイルを確認しよう
おわりに

はじめに

今回はgulp-pleeeaseを使ってcssの圧縮やベンダープレフィックスの付与、メディアクエリをまとめる処理を実行する方法について説明していきます。

ちょっと変わった名称ですが、gulp-pleeeaseというプラグインで合ってます。(読み方は分かりません・・・)

豊富なオプションにより今まで複数のプラグインを使って処理していたことがgulp-pleeeaseだけで実現できるようになります。

対象者

いろんなプラグインを使ってcssの処理をしている方
使用するプラグインをなるべく少なくしたい方

その他gulpのおすすめのプラグインはこちら

gulp おすすめプラグインまとめ 2022年度版【gulp4】

gulpの使い方まとめについてはこちら。

【gulp4】使い方まとめ ~インストールから導入まで~【web制作#9】

web制作ではコーディング以外にたくさんの面倒な作業があります。gulpを導入すればその面倒な作業を全て自動化させることができるかもしれません。gulpのインストールから導入までまとめています。どういったプラグインを導入したらいいか分からないといった方にもおすすめのプラグインを紹介しています。

gulpfile.jsのテンプレート紹介についてはこちら。

【gulp4】gulpfile.jsのテンプレートサンプル紹介【web制作】

今回はgulpfile.jsのテンプレートサンプルを紹介していきます。久しぶりにgulpを触ったのでまとめておこうと思います。gulpを導入したけどどういうプラグインを導入すればいいか分からない、どのように構築していけばいいか分からないといった方に見ていただけるとうれしいです。web制作をしている方はgulpを使えるようになるとできる幅が広がるのでぜひ参考にしてください。

それではgulp-pleeeaseの説明に移ります。

gulp-pleeeaseのメリット

冒頭でも記載しましたが、gulp-pleeeaseを使うメリットは複数のプラグインを使って処理していたことが1つのプラグインだけで実現できることです。

通常cssの圧縮、ベンダープレフィックスの自動付与、メディアクエリをまとめる処理をする場合はそれぞれ以下のプラグインを使用するかと思います。

プラグイン名	内容
gulp-clean-css	cssの圧縮をする
gulp-autoprefixer	ベンダープレフィックスの自動付与をする
gulp-group-css-media-queries	メディアクエリをまとめる

これらがgulp-pleeeaseのプラグイン1つで同様の処理ができてしまいます。

今回は以下2つのプラグインを使ってgulp-pleeeaseの説明をしていきます。

プラグイン名	内容
gulp-pleeease	cssの圧縮、ベンダープレフィックス付与、メディアクエリをまとめる
gulp-plumber	watch中にエラーが発生してもwatchが止まらないようにする

ディレクトリ構成

今回のディレクトリ構成は下記になります。

test
├ node_modules
├ src
│ ├ css
│ └ sass
│ 　 └ style.scss
├ gulpfile.js
├ package-lock.json
└ package.json

scssファイルをコンパイルしてcssフォルダに出力させます。

コンパイル後にcssファイルにgulp-pleeeaseの処理を実行させていきましょう。

プラグインをインストールしよう

それではgulpのプラグインをインストールしていきましょう。

npm i -D gulp-pleeease

下記コマンドをターミナルで実行してgulp-pleeeaseをインストールします。

npm i -D gulp-pleeease

gulp-pleeease公式

gulp-pleeease

npm i -D gulp-plumber

こちらも同様にインストールします。

npm i -D gulp-plumber

gulp-plumber 公式

gulp-plumber

gulpfile.jsを編集しよう

プラグインのインストールが完了したらgulpfile.jsを編集していきましょう。

//----------------------------------------------------------------------
//  モード
//----------------------------------------------------------------------
"use strict";

//----------------------------------------------------------------------
//  モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, watch, series, parallel } = require("gulp");

const pleeease = require("gulp-pleeease");
const plumber = require("gulp-plumber");

const sass = require("gulp-dart-sass");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function compile(done) {
  src("./src/sass/**/*.scss")
    .pipe(plumber())                // watch中にエラーが発生してもwatchが止まらないようにする
    .pipe(sass())
    .pipe(pleeease({
      autoprefixer:{                // ベンダープレフィックスの自動付与
        browsers:[                  // 対象ブラウザの指定
          "last 2 versions",
          "ie >= 11",
          "Android >= 4"
        ],
      },
      mqpacker: true,               // メディアクエリをまとめる
      minifier: true,               // cssの圧縮をする
    }))
    .pipe(dest("./src/css"));

  done();
}

//----------------------------------------------------------------------
//  タスク定義
//----------------------------------------------------------------------
exports.compile = series(compile);

/************************************************************************/
/*  END OF FILE                                                         */
/************************************************************************/

今回使用しているオプションは以下になります。

オプション名	内容
autoprefixer	ベンダープレフィックスの自動付与
browsers	対象ブラウザの指定
mqpacker	メディアクエリをまとめる
minifier	cssの圧縮をする

上記以外にも指定できるオプションはたくさんありますのでご自身で確認してみてくださいね。

別途sassのコンパイルをするプラグインをインストールさせています。

本記事の説明から外れますのでこちらを参照してください。

gulp-sassを使ってDart Sassでコンパイルできるようにしよう【gulp4】

gulp-sassを使ってDart Sassでコンパイルできるようにする方法について説明していきます。これからはDart Sassの環境でweb制作を進めていく必要があります。早いうちにDart Sassを導入して書き方に慣れるようにしましょう。gulp-sass-glob-use-forwardでglob機能を使ってファイルの読み込みする方法についても紹介しています。

style.scssを編集しよう

gulp-pleeeaseが実行されるとどのようになるのかを見るためにサンプルコードを載せておきます。

style.scss

@charset "utf-8";

@media (min-width: 961px) {
  .header {
    background-color: red;
    transform: scale(2);
    transition: all 0.25s;
  }
}

@media (min-width: 961px) {
  .footer {
    display: flex;
  }
}

コマンドを実行しよう

編集が完了したらターミナルからコマンドを実行しましょう。

npx gulp compile

「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。

gulpのインストール先が異なる可能性があります。

【gulp4】gulpとはなにか? 環境構築してみよう windows10版

web制作にある程度慣れてきた方向けにgulpとはなにか、メリット・デメリットを説明しています。またgulpの環境構築についても記載していますのでgulpに興味のある方はぜひ導入を検討してみてください。

以下のようになれば正しく実行できています。

[00:00:00] Starting 'compile'...
[00:00:00] Starting 'compile'...
[00:00:00] Finished 'compile' after 11 ms
[00:00:00] Finished 'compile' after 14 ms

実行後のファイルを確認しよう

実行後のファイルはcssフォルダに作成されているはずです。

test
├ node_modules
├ src
│ ├ css
│ │ └ style.css      // 実行後のファイル
│ └ sass
│ 　 └ style.scss
├ gulpfile.js
├ package-lock.json
└ package.json

それでは実行後のファイルを確認してみましょう。

style.css(実行前)

@charset "utf-8";

@media (min-width: 961px) {
  .header {
    background-color: red;
    transform: scale(2);
    transition: all 0.25s;
  }
}

@media (min-width: 961px) {
  .footer {
    display: flex;
  }
}

style.css(実行後)

@media(min-width:961px){.header{background-color:red;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all .25s;transition:all .25s}.footer{display:-webkit-box;display:-ms-flexbox;display:flex}}

圧縮未実施の場合は以下のようになります。

style.css(圧縮未実施の場合)

@media (min-width: 961px) {
  .header {
    background-color: red;
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-transition: all 0.25s;
    transition: all 0.25s
  }
  .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
  }
}