gulp-purgecssとgulp-clean-cssでcssファイルを圧縮しよう【gulp4】

html/css
この記事は約10分で読めます。
スポンサーリンク

はじめに

今回はgulp-purgecssとgulp-clean-cssを使ってcssファイルを圧縮する方法について説明します。

cssファイルが重たいと読み込みに時間が掛かってwebページの表示に時間が掛かるなどの問題があります。

cssフレームワークのような膨大なcssを使っている方は特に必要になってきますのでぜひ参考にしてください。

対象者
  • cssファイルの圧縮の方法を知りたい方
  • cssフレームワークを使用している方

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

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

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

それではgulpでcssを圧縮する方法の説明に移ります。

スポンサーリンク

cssを圧縮する目的

cssを圧縮するメリットとして以下3つのメリットがあります。

  • 読み込み時間の短縮によりwebページの表示速度が向上する
  • サーバー容量の節約ができる
  • ソースコードを難読化し悪用を防ぐ

参考サイト

cssを圧縮する一番の目的は、読み込み時間を圧縮させてwebページの表示速度を向上させることです。

その他2つについては普段あまり恩恵を感じられないと思いますので、こういうメリットもあるのだと知っているだけで大丈夫です。

今回は以下3つのプラグインを使ってcssの圧縮をしていきます。

プラグイン名内容
gulp-purgecsscssファイルに対して未使用のスタイルを削除する
gulp-clean-cssファイル内の不要な空白や改行、コメントなどを削除する
gulp-plumberwatch中にエラーが発生してもwatchが止まらないようにする

JavaScriptファイルを圧縮する方法についてはこちら

スポンサーリンク

ディレクトリ構成

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

test
├ node_modules
├ dist
│ └ css
├ src
│ ├ css
│ │ └ style.css
│ ├ js
│ │ └ index.js
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.json

style.css に対して圧縮を行い、圧縮後のファイルをdist/css に出力します。

スポンサーリンク

ファイル構成

今回使用するindex.htmlstyle.css のファイル構成を載せておきます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div class="bg-yellow">
    cssファイル圧縮の説明です。
  </div>
</body>
</html>

style.css

@charset "utf-8";

/* クラスを3つ定義します */
.bg-blue{
  background-color: blue;
}

.bg-yellow{
  background-color: yellow;
}

.bg-red{
  background-color: red;
}

上記2つを見るとindex.html で使っていないクラスがstyle.css に記述されていますよね。

gulpを使ってこれら未使用のクラスを削除しつつcssファイルを圧縮していきましょう。

スポンサーリンク

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

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

npm i -D gulp-purgecss

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

npm i -D gulp-purgecss

gulp-purgecss 公式

npm i -D gulp-clean-css

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

npm i -D gulp-clean-css

gulp-clean-css 公式

npm i -D gulp-plumber

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

npm i -D gulp-plumber

gulp-plumber 公式

スポンサーリンク

gulpfile.jsを編集しよう

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

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

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

const purgecss = require("gulp-purgecss");
const cleancss = require("gulp-clean-css");
const plumber = require("gulp-plumber");

//----------------------------------------------------------------------
//  関数定義
//----------------------------------------------------------------------
function minify(done) {
  src("./src/css/*.css")
    .pipe(plumber())                              // watch中にエラーが発生してもwatchが止まらないようにする
    .pipe(purgecss({
      content: ["./src/*.html","./src/**/*.js"],  // src()のファイルで使用される可能性のあるファイルを全て指定
    }))
    .pipe(cleancss())                             // コード内の不要な改行やインデントを削除
    .pipe(dest("./dist/css/"));

  done();
}

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

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

purgecssのcontentオプションには定義したcssクラスが使われる可能性のあるファイル全てを指定しましょう。

スポンサーリンク

コマンドを実行しよう

gulpfile.jsの編集が完了したらコマンドを実行しましょう。

npx gulp minify

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

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

以下のようになれば正しくcssを圧縮できています。

[00:00:00] Starting 'minify'...
[00:00:00] Starting 'minify'...
[00:00:00] Finished 'minify' after 22 ms
[00:00:00] Finished 'minify' after 27 ms
スポンサーリンク

圧縮後のファイルを確認しよう

圧縮後のファイルはdistフォルダに作成されているはずです。

test
├ node_modules
├ dist
│ └ css
│   └ style.css  // 圧縮後のファイル
├ src
│ ├ css
│ │ └ style.css
│ ├ js
│ │ └ index.js
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.json

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

style.css(圧縮前)

@charset "utf-8";

/* クラスを3つ定義します */
.bg-blue{
  background-color: blue;
}

.bg-yellow{
  background-color: yellow;
}

.bg-red{
  background-color: red;
}

style.css(圧縮後)

@charset "utf-8";.bg-yellow{background-color:#ff0}

未使用のクラスが削除され、空白や改行も無くなり1行になりましたね。

ファイルサイズは「187byte」 → 「50byte」に圧縮されました。

スポンサーリンク

おわりに

以上gulp-purgecssとgulp-clean-cssを使ってcssファイルを圧縮する方法について説明しました。

いかがだったでしょうか。

webページの表示速度にこだわる方やcssフレームワークなどを多用している方はぜひ導入してみてください。

コメント

タイトルとURLをコピーしました