【Gulp】WordPressのCSSやJSファイル等を「自動で圧縮」する方法をわかりやすく紹介！

WordPressは高機能な分、素のHTMLなどと比べて格段に重く、優秀なテーマはこれを可能な限り高速化して作ったりしています。

しかしテーマ側で出来る最適化というのはやはり限界があり、日々増えていくCSSやJavaScriptのファイルなどは運営者によるメンテナンスがメインになります。

日を追うごとに肥大化していくこれらのファイルは「圧縮する事でページの表示速度を早く」する事が出来ます。

ただ、毎回ファイルの圧縮をするには手間がかかり、圧縮した後にコード修正などを行う際「コメントが無い」、「再インデントしないと読みにくすぎる」等といった感じでメンテナンスも大変です。

今回は「Gulp」というツールを使って、そんな「CSSやJavaScriptのファイルを元のファイルを残したまま自動で圧縮する方法」の紹介です。

これなら元のファイルを編集するだけで自動で圧縮してくれるのでメンテナンスは簡単で、なおかつファイルの軽量化が出来ますよ☆

※やること自体は簡単ですが、一応本記事の内容は中級者さん向けです。実行される際は必ず自己責任でお願いします。

※今回はWordpressのテーマ「Simplicity2」で書いています。テーマが違う場合もやる事は基本的に同じなので部分的に読み替えてお読み下さい。

ページの表示速度とファイルの圧縮について

Googleが提供している「Page Speed Insight」は有名なツールですが、このスコアを100点満点にしようと頑張っている方をよく見かけます。

事実、サイトの表示速度というのは非常に重要で、モバイルサイトで「読み込みに3秒以上かかると半数以上が離脱する」とも言われています。

冒頭で「日々増えていくCSSやJavaScriptのファイルなどは運営者によるメンテナンスがメインになる」と書きましたが、CSSやJavaScriptだけに限らず、基本的にコーディングの際は運用しやすい（見やすい）ように改行やインデント、コメントアウトなどを使って記述していきます。

ただ、この改行やインデントなどはあくまで「人が見やすいだけ」だけであって、コンピュータからしたら「読みにくい不要なもの」であって、その分だけページの表示速度は遅くなります。

コンピュータにとって、読み込むファイルは「必要最低限だけ」記述してある事が好ましいので、今回の記事はそんなコンピュータにとってムダな改行やインデント、コメントなどを削除してMinify（縮小・圧縮）する方法の紹介になります。

元ファイルを残したまま自動圧縮

ファイルの圧縮自体はWeb上で圧縮出来るツールなどがあるので簡単に出来ますが、特にCSSファイルとかは頻繁に編集するのでその度に手動で圧縮してコピペしてサーバーへアップなんて事は正直やってられません。

また、圧縮したファイルはそれこそ圧縮しているので編集する際とてつもなく手間がかかり面倒で仕方ありません。よもやSublime Text 3のパッケージを追加して再インデントしたりといった事も必要になる事もあります。

今回の方法では「元ファイルはそのまま」、「編集したら自動で圧縮して別ファイルを作成」という事をやります。

前述したPage Speed Insightの中でよく見る最適化の提案に「CSSを縮小する」とか「JavaScriptを縮小する」といった項目がありますが、今回の方法を使えばこの項目をクリアしやすくなります。

当然それでも記述が多すぎる場合は上記に限りません。その場合は記述自体をシェイプアップしましょう。

自動圧縮に使うツールと作業範囲

今回の作業では「Gulp」というツールを使います。「Gulp（ガルプ）」とはJavaScriptで書かれたビルドシステムの事なんですが、この辺を説明していくとキリがないので割愛しますが、「自動圧縮して別ファイルに書き出す」という事が出来る非常に便利なツールと思って頂ければ結構です。

知っている方からしたら「せっかくGulp使うならSassをコンパイルして圧縮させて結合させて～～」などと思うかもしれませんが、今回は初心者さんから中級者さん向けに「自動ファイル圧縮＆書き出し」に絞って書いていきます。

さて、このGulpというツールを使うためには「Node.js」というツールが必要となります。

これまた詳細は割愛しますが、一般的にJavaScriptというとブラウザ上で処理するイメージがあるかもしれませんがNode.jsはサーバーサイドのJavaScript環境になります。

「ナニソレオイシイノ・・・( ꒪Д꒪)？？」

という方はネットで検索してみてくださいm(＿＿)m

Node.jsのインストール

前項でGulpとNode.jsを使うと書きましたが、Gulpのインストールの前にまずはNode.jsをインストールします。

以下のページから「最新版」をダウンロード。

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

すると「node-v●.●.●-x▲▲.msi」というファイルがダウンロードされます。

上記ファイルを開くと以下のようなインストーラが実行されますので画面の指示に従って進めてインストールします（基本Nextで進めるだけです。）

途中以下の画面では利用規約に同意するかの画面なので、内容を確認して問題が無ければ赤丸の部分にチェックを入れて「Next」で進みます。

Node.jsのインストールが完了したら、念の為コマンドプロンプト（Macだとターミナル？）を開いて「node -v」と入力してEnterで確認します。

※「node」と「-v」の間には「半角スペース」が入ります。

以下のように「v●.●.●」と表示されればOKです。

package.jsonの作成

Node.jsをインストールしたら、次に設定ファイル（package.json）を作成します。

今回はWordpressの「themesフォルダ」の中に作成するので、まずはコマンドプロンプト上で「themesフォルダへ移動」します。

コマンドプロンプトでthemesフォルダへ移動するには以下をご自分の環境に当てはめて編集してコマンドプロンプトへコピペしてEnter。

cd C:\Users\ユーザー名\Wordpressをインストールしたフォルダ\wp-content\themes

【書き方の例】

cd C:\Users\ras-pc\xampp_htdocs\tips4life\wp-content\themes

[ Tips ]

パスがちょっとわからないという方は「cd」と入力した後に半角スペースを開けて「themesフォルダ」をコマンドプロンプトにドラッグすると、themesフォルダのパスが入力されます。

次に以下のコードをコマンドプロンプトにコピペしてEnter。

npm init -y

これで「themesフォルダ」の中に「package.json」が作成されます。

Gulpのインストール

次に本命の「Gulp」をインストールします。

前項でコマンドプロンプト上で「themesフォルダ」へ移動しているので、このまま以下のコードをコマンドプロンプトにコピペしてEnter。

npm install gulp -d

※npm WARN deprecated～～とエラーが表示される場合がありますが、これは依存ファイルでバージョン指定されている事が原因で表示されるメッセージで、Gulp自体はインストールされているのでここではスルーします。

ここまでで「package.json」と「Gulp」を「themesフォルダ」の中にインストール出来ました。

次に、Gulpは「gulpfile.js」というファイルを使うので、コマンドプロンプトではなくメモ帳などで新規作成から「gulpfile.js」という名前で今と同じディレクトリの「themesフォルダ」の中に保存します。

※gulpfile.jsの中身はまとめてコピペ出来るように後述します。

今回使うプラグインの説明とインストール方法

前項でgulpfile.js（まだ中身は空の状態）を作成したらプラグインをインストールします。

今回使うプラグインはこちら。

【gulp-changed】
編集したファイルだけを処理する為に使います。

【gulp-clean-css】
CSSファイルを圧縮（minify）する為に使います。

【gulp-uglify】
JavaScriptファイルを圧縮（minify）する為に使います。

【gulp-replace】
文字変換（今回は@charsetを削除）に使います。

【gulp-header】
圧縮後に必要な記述（今回は@charset）を挿入する為に使います。

WordPressはcssファイルなどの最初に必須情報がコメントアウトで記述されていたります。

この記述が無いとうまくファイルを読み込んでくれないのですが、普通に圧縮するとこの記述も削除されてしまいます。

そこでよく「gulp-header」を使って再度記述を挿入する方法を取ったりすのですが、simplicity2では「!コメント」を使っているので、今回は@charsetだけ挿入する方法で紹介します。

また、ちょっと難しいかもしれませんがこのgulp-headerは「マルチバイトの有無」でCSSのcharsetを自動で入れてくれたりします。

ただ、どちらの場合でも対応出来るようにした方が便利でメンテナンスも楽なので、charsetが記述されている時は「gulp-changed」で一旦削除して、再度「gulp-header」でcharsetを挿入する方法を取っています。

よくわからないという方は、「この方が便利なんだな」と思って頂いてOKです。

それでは上記プラグインをインストールしましょう。何度もコマンドを打つのは面倒なので一度に全部入れちゃいます。

以下のコードをコマンドプロンプトへコピペしてEnter。

npm install gulp-changed gulp-clean-css gulp-uglify gulp-replace gulp-header -d

これで今回の方法でCSSやJSファイルを圧縮する際に必要なプラグインのインストールは完了です☆

ちなみに、プラグインをインストールすると「package.json」に情報が追加されていきます。

今プラグインを追加した後にpackage.jsonを開いて見てみると、以下のようにdependenciesの項目に名前とバージョンが記述されているはずです。

{
  "name": "themes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-changed": "^3.2.0",
    "gulp-clean-css": "^3.9.2",
    "gulp-header": "^1.8.9",
    "gulp-replace": "^0.6.1",
    "gulp-uglify": "^3.0.0"
  }
}

Gulpの作業用フォルダの作成

次に、作業用フォルダを作成します。

フォルダ名は何でも良いのですが、ここでは「origin」という名前のフォルダを作って説明します。

簡単に説明すると、ここで作ったoriginフォルダの中に「圧縮したいファイル」を複製します。

例えば「style.css」を圧縮したい時は「style.cssをoriginフォルダの中に複製」します。

こうする事で、このoriginフォルダの中にあるファイルを編集したら「元ファイルはそのまま残したまま自動で圧縮して書き出し」が出来るようになります。

今回は例として「simplicity-child」の中に「originフォルダ」を作って、その中にsimplicity-childのstyle.cssを複製してみましょう。

ディレクトリのイメージは以下のような感じになります。

themes/
  ├ origin/
  │  └ style.css ←ここを編集すると
  │
  │
  └ style.css ←圧縮してここに書き出させる

これでメンテナンス時などの心配も必要ない環境が出来ました☆

gulpfile.jsの作成

さて、ここまで来ればほぼ完成したと言っても過言じゃない状態です。

gulpを実行する際、「gulpfile.js」というファイルを使います。

gulpfile.jsは前項までに作成してありますので、作成してあるgulpfile.jsを開いて中に以下のコードをコピペして保存します。

var gulp = require('gulp');
var changed = require('gulp-changed');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var replace = require('gulp-replace');
var header = require('gulp-header');
var charset = ['@charset "UTF-8";',''].join('\n');

gulp.task('default', function(){
	gulp.watch(['./**/origin/*.css', './**/origin/*.js'], function() {
		gulp.src('simplicity2/origin/*.css')
		.pipe(changed('simplicity2/'))
		.pipe(cleanCSS())
		.pipe(replace(/@charset "UTF-8";/g, ''))
		.pipe(header(charset))
		.pipe(gulp.dest('simplicity2/'));

		gulp.src('simplicity2-child/origin/*.css')
		.pipe(changed('simplicity2-child/'))
		.pipe(cleanCSS())
		.pipe(replace(/@charset "UTF-8";/g, ''))
		.pipe(header(charset))
		.pipe(gulp.dest('simplicity2-child/'));

		gulp.src('simplicity2/origin/*.js')
		.pipe(changed('simplicity2/'))
		.pipe(uglify())
		.pipe(gulp.dest('simplicity2/'));

		gulp.src('simplicity2-child/origin/*.js')
		.pipe(changed('simplicity2-child/'))
		.pipe(uglify())
		.pipe(gulp.dest('simplicity2-child/'));
	});
});

以上で準備は全て完了です☆

Gulpの実行

前項まで準備が完了したので、あとはgulpを実行するだけです☆

以下の呪文コードをコマンドプロンプトにコピペしてEnterを押してみましょう！

npx gulp

コマンドプロンプトに以下のような表示がされれば成功です。

それでは実際にファイルの編集をしてみましょう。

前項で「originフォルダの中にstyle.cssを複製」したと思いますので、ファイルを開いてそのまま保存してみましょう。
※念の為、場所は「simplicity-child/origin/」にある「style.css」です。

次に「simplicity-child/」にある「style.css」を開くと圧縮された状態になっているはずですので、あとはこのファイルをアップロードするだけです☆

上記では小テーマ（simplicity-child）で説明しましたが、親テーマ（simplicity）でも同じようにthemesフォルダ直下にoriginフォルダを作成して、その中にstyle.cssやjavaScript.jsなどを複製して編集すれば圧縮してsimplicityフォルダ直下のstyle.cssやjavaScript.jsに書き出してくれます。

注意点

本記事冒頭でも書きましたが、今回は記事の内容が中級者さん向けとなってます。

FTPクライアントなどの使い方やディレクトリ構造やパスについてあまり良くわからないという方や、バックアップなどから「何かあった時に元に戻せる」という方以外は実行しないで下さい。

最低限上記をクリアしている場合は非常に便利で効率的なツールですが、よくわからないで実行した場合、想定外の事が起きた際にご自身で記述を変えたり元に戻したりする以外基本的に対処のしようがないので、あくまで全て自己責任でお願い致します。

今回の方法では、「simplicity」と「simplicity-child」直下に「origin」フォルダを作り、その中にコピペしたCSSやJSファイルを編集することで、

・「simplicity」フォルダ直下の「.cssもしくは.js」ファイル

・「simplicity-child」フォルダ直下の「.cssもしくは.js」ファイル

へ圧縮して書き出す内容となります。

コマンドプロンプトでの実行を止める場合はCtrl＋Cで「終了しますか？と聞かれるのでYを押してEnterで停止できます。

当然ですがGulpを走らせた状態じゃないと自動圧縮など今回のプログラムは動かないので、CSSなどの編集は「npx gulp」でgulpを走らせた状態で行って下さい。

※PCのシャットダウンや再起動でgulpは終了するので、次回作業の時などは「cdコマンド」でthemesフォルダへ移動して「npx gulp」で実行してから作業を行うイメージです。

手順のみまとめ

最後に、各説明を割愛して手順のみをまとめておきますので「手順だけ見たい」という方は以下をご覧ください。

Node.jsのインストール

以下から「最新版」をインストール。

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

package.jsonの作成

themesフォルダへ移動

cd C:\Users\ユーザー名\Wordpressをインストールしたフォルダ\wp-content\themes

package.jsonの作成

npm init -y

Gulpのインストール

npm install gulp -d

プラグインのインストール

npm install gulp-changed gulp-clean-css gulp-uglify gulp-replace gulp-header -d

作業用フォルダの作成

「themes/simplicity/」と「themes/simplicity-child/」直下に「origin」（作業用フォルダ）を作成。

それぞれに圧縮したいファイルを複製（ファイルのコピペ）。

gulpfile.jsの作成

gulpfile.jsに以下をコピペして保存。

var gulp = require('gulp');
var changed = require('gulp-changed');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var replace = require('gulp-replace');
var header = require('gulp-header');
var charset = ['@charset "UTF-8";',''].join('\n');

gulp.task('default', function(){
	gulp.watch(['./**/origin/*.css', './**/origin/*.js'], function() {
		gulp.src('simplicity2/origin/*.css')
		.pipe(changed('simplicity2/'))
		.pipe(cleanCSS())
		.pipe(replace(/@charset "UTF-8";/g, ''))
		.pipe(header(charset))
		.pipe(gulp.dest('simplicity2/'));

		gulp.src('simplicity2-child/origin/*.css')
		.pipe(changed('simplicity2-child/'))
		.pipe(cleanCSS())
		.pipe(replace(/@charset "UTF-8";/g, ''))
		.pipe(header(charset))
		.pipe(gulp.dest('simplicity2-child/'));

		gulp.src('simplicity2/origin/*.js')
		.pipe(changed('simplicity2/'))
		.pipe(uglify())
		.pipe(gulp.dest('simplicity2/'));

		gulp.src('simplicity2-child/origin/*.js')
		.pipe(changed('simplicity2-child/'))
		.pipe(uglify())
		.pipe(gulp.dest('simplicity2-child/'));
	});
});