はじめに
今回はgulp-purgecssとgulp-clean-cssを使ってcssファイルを圧縮する方法について説明します。
cssファイルが重たいと読み込みに時間が掛かってwebページの表示に時間が掛かるなどの問題があります。
cssフレームワークのような膨大なcssを使っている方は特に必要になってきますのでぜひ参考にしてください。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではgulpでcssを圧縮する方法の説明に移ります。
cssを圧縮する目的
cssを圧縮するメリットとして以下3つのメリットがあります。
参考サイト
cssを圧縮する一番の目的は、読み込み時間を圧縮させてwebページの表示速度を向上させることです。
その他2つについては普段あまり恩恵を感じられないと思いますので、こういうメリットもあるのだと知っているだけで大丈夫です。
今回は以下3つのプラグインを使ってcssの圧縮をしていきます。
| プラグイン名 | 内容 |
| gulp-purgecss | cssファイルに対して未使用のスタイルを削除する |
| gulp-clean-css | ファイル内の不要な空白や改行、コメントなどを削除する |
| gulp-plumber | watch中にエラーが発生してもwatchが止まらないようにする |
JavaScriptファイルを圧縮する方法についてはこちら
ディレクトリ構成
今回のディレクトリ構成は下記になります。
test
├ node_modules
├ dist
│ └ css
├ src
│ ├ css
│ │ └ style.css
│ ├ js
│ │ └ index.js
│ └ index.html
├ gulpfile.js
├ package-lock.json
└ package.jsonstyle.css に対して圧縮を行い、圧縮後のファイルをdist/css に出力します。
ファイル構成
今回使用するindex.html とstyle.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-purgecssgulp-purgecss 公式
npm i -D gulp-clean-css
こちらも同様にインストールします。
npm i -D gulp-clean-cssgulp-clean-css 公式
npm i -D gulp-plumber
こちらも同様にインストールします。
npm i -D gulp-plumbergulp-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 */
/************************************************************************/コマンドを実行しよう
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行になりましたね。
おわりに
以上gulp-purgecssとgulp-clean-cssを使ってcssファイルを圧縮する方法について説明しました。
いかがだったでしょうか。
webページの表示速度にこだわる方やcssフレームワークなどを多用している方はぜひ導入してみてください。
コメント