COLUMN

GulpによるCSSのminifyで、サイトの読み込み速度を改善しよう

2025.12.08

Webサイトの表示速度は、ユーザー体験やSEOに大きく影響します。
特にCSSはページのスタイルを司る重要なファイルですが、

そのままの状態では 改行・スペース・コメント が多く、ファイルが重くなりがちです。
そこで活躍するのが Gulp を使ったCSSのminify（圧縮）処理 です。

Gulp を使うことで、

CSSを自動圧縮
ファイル変更時に自動ビルド
作業ミスの防止
安定した品質で公開

が可能になります。

この記事では、Gulp を使ってCSS を minify する最もシンプルな方法 を紹介します。

Gulpとは？

Gulp（ガルプ） は、フロントエンド開発でよく使われる自動化ツールです。

以下のような面倒な作業を自動化できます。

CSSやJavaScriptの圧縮（minify）
SassやSCSSのコンパイル
画像の圧縮
ブラウザの自動リロード
ファイル監視（watch）

とくにCSS minify は最初に覚えるべき基本機能といえます。

Gulpファイルの利用までの流れ

① package.json がなければ作成

$ npm init -yCode language: Shell Session (shell)

② Gulp と CSS 圧縮プラグインをインストール

※Pathあくまで一例。それぞれのプロジェクトのフォルダ階層に応じて差し替えてください。

$ npm install gulp gulp-clean-css gulp-rename --save-devCode language: Shell Session (shell)

③ Gulpfile を作成する（ESM対応版）

import gulp from "gulp";
import cleanCSS from "gulp-clean-css";

const { src, dest, watch, series } = gulp;

// CSS minify タスク
function minifyCSS() {
  return src("./src/css/*.css")
    .pipe(cleanCSS())
    .pipe(
      rename({
        suffix: ".min",
      })
    )
    .pipe(dest("./dist/css/"));
}

// 監視タスク
function watchFiles() {
  watch("./src/css/*.css", minifyCSS);
}

export default series(minifyCSS, watchFiles);Code language: JavaScript (javascript)

④ 実際に Gulp を実行してみる

$ npx gulp

src/css に入っている CSS が minify され
dist/css に圧縮後の CSS がmin.cssの形式で出力されます
ファイルを保存すれば自動で再ビルド

という便利な環境が整います。

CSS minify を行うメリット

① サイトの読み込み速度が向上する

CSSファイルの行数やスペースが削減されるため、CSSが軽くなり、表示速度が速くなります。

② Core Web Vitals（LCPなど）にも好影響

Google が重視する速度指標にもプラス。

③ ソースコードをきれいに保てる

本番用と開発用で CSS を使い分けられるため、保守性が向上します。

④ 自動化によりヒューマンエラーが減る

手作業で minify を忘れるミスがなくなる点も大きなメリットになります。

まとめ：GulpのCSS minifyは簡単で効果が大きい

Gulp を使った CSS minify は、
最小の工数で最大のパフォーマンス改善ができる方法 です。

セットアップは5分
コマンド1つで圧縮
ファイルを保存するだけで自動ビルド

制作会社でも、個人開発でも、必ず役に立つツールなのでぜひご利用ください。

KEYWORD