Windowsに「Node.js」 と「Gulp.js」をインストールして、WordPressテーマのSimplicityの子テーマにあるCSSをMinify化して読み込んでみた

「Gulp」というタスクランナーが以前から気になっていたので、当サイトで採用しているWordPressテーマのSimplicityで適用してみることにしました。

今回は「Gulp」でCSSのMinify化(圧縮)を行ってみたのでご紹介いたします。

「Gulp」とは

gulp.js

gulp.js

「gulp」は「Node.js」をベースとしたビルドシステムで、一般にはタスクランナーと呼ばれています。「gulp」を利用するとファイルの圧縮やSassのコンパイル、ファイルの保存などを自動で行うことができます。

「Node.js」とは

Node.js

Node.js

「Node.js」はサーバー側で動作するJavaScriptで、大量のリクエストをさばいたり、リアルタイムに処理をすることができます。「Node.js」を利用したツールが数多くあり、今回ご紹介する「Gulp」もその一つです。

「Node.js」を導入する

「Nodist」をダウンロード

「Gulp」を利用するには「Node.js」が必要なのですが、「Node.js」の管理をしやすくするために「Releases · marcelklehr/nodist」から「Nodist」のインストーラーをダウンロードをします。

Node.js exeをダウンロード
exeをダウンロード

「Nodist」をインストール

exeをダウンロードした後、「Nodist」のアイコンをクリックしてインストーラーを起動します。

Nodist アイコンをクリックしてインストーラーを起動
アイコンをクリックしてインストーラーを起動

インストーラーで手順を踏み、インストールしていきます。

Nodist インストーラーの手順を踏み「Nodist」をインストールする
インストーラーの手順を踏み「Nodist」をインストールする

コマンドで確認

「Nodist」をインストールした後、インストールを確認するために下記のコマンドをコマンドプロンプトで入力します。

nodist -v

バージョンが表示されれば「Nodist」のインストールは成功です。

「Node.js」をインストール

下記のコマンドを入力します。

nodist latest

次にインストールを確認するために下記のコマンドを入力します。

node -v

バージョンが表示されれば「Node.js」のインストールは成功です。

次に下記のコマンドを入力し、「Node.js」のパッケージ管理ツール(npm)のバージョンを確認します。

npm -v

バージョンが表示されればnpmのコマンドを使用することができます。

以上で「Node.js」のインストールは完了となります。

「Gulp」を導入する

「Gulp」をインストール

「Gulp」をインストールするために、下記のコマンドを入力します。

npm install -g gulp

次に下記のコマンドを入力します。

npm install -D gulp

インストールを確認するために下記のコマンドを入力します。

gulp -v

バージョンが表示されれば「gulp」のインストールは成功です。

「Simplicity」の子テーマに移動する

「gulp」を使用したいプロジェクトのフォルダへ移動します。私はローカルにダウンロードした「Simplicity」の子テーマで利用するために下記のように入力しました。

cd C:/project/pc-weblog/vccw/wordpress/wp-content/themes/simplicity2-child

上記のディレクトリパスは設置したプロジェクトや「Gulp」を使用したいフォルダの場所で変わります。「wp-content/themes/simplicity2-child」はおなじみの「Simplicity」の子テーマまでのディレクトリパスですね。

「package.json」ファイルを作成する

「Gulp」を使用したいフォルダに移動した後、下記のコマンドを入力し、「package.json」を作成します。「package.json」は「Node.js」を使用したプロジェクトの情報を書き込めるファイルです。

npm init

上記のコマンドを入力すると、途中でプロジェクト名などの入力を求められますが、まずはEnterキーを入力しつつ進みます。手っ取り早く進みたいのであれば下記のコマンドを入力します。

npm init -y

「cd 」で移動したフォルダを開いてみると、下記のような記述の「package.json」ファイルが作成されているはずです。

{
  "name": "simplicity2-child",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "dependencies": {
    "gulp": "^3.9.1",
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

途中で求められる設定を入力すると、上記の「package.json」に反映されます。また、「Gulp」でインストールしたプラグインの情報などもここに書き込まれます。

プロジェクトフォルダに「Gulp」をインストール

「Gulp」を利用したいフォルダで以下のコマンドを入力して、「Gulp」をインストールします。

npm install gulp --save-dev

「gulpfile.js」を作成する

「Gulp」をインストールをした後、「gulpfile.js」というファイルを作り、以下を記述します。

//plug-in
var gulp = require('gulp');

「gulp-minify-css」プラグインをインストール

下記のコマンドを入力して、CSSをminify化(圧縮)する「gulp-minify-css」プラグインをインストールします。

npm install gulp-minify-css --save-dev

次に先ほど作成した「gulpfile.js」に「var sass = require(‘gulp-minify-css’);」と追記します。

//plug-in
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');←追記

さらに「gulpfile.js」に下記を追記します。

//CSS圧縮
gulp.task('minify-css', function() {
    return gulp.src("*.css")
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css/'));
});

‘minify-css’というのがタスク名で、「”*.css”」が圧縮する対象のファイル(CSS)になります。「*」はすべてという意味で、「*.css」で、同じ階層にあるCSS全てにminify(圧縮)がかかります。

「’dist/css/’」は「dist」というフォルダの中に「css」というフォルダを作り、その中にminify(圧縮)されたCSSがすべて保存されます。

CSSをminify(圧縮)する

下記のコマンドを入力するとCSSがminify(圧縮)され、「dist/css/」に保存されます。

gulp minify-css

CSSが変更され保存した時に自動でminify(圧縮)する

「gulp minify-css」コマンドを入力すると、CSSがminify(圧縮)されますが、CSSを変更した時に毎回コマンドを入力するのは面倒なので、自動でminify(圧縮)できるように「gulpfile.js」に下記の記述をします。

gulp.task('watch', function() {
    gulp.watch('*.css', ['css']);
});

次に下記のコマンドを入力します。

gulp watch

上記のコマンドで「simplicity2-child」内のCSSが監視され、変更→保存されると自動的に「dist/css/」内にminify(圧縮)されたCSSが保存されます。

minify(圧縮)された子テーマのCSSを読み込ませる

minify(圧縮)された子テーマのCSSを読み込ませるために「wp-content/themes/simplicity2/lib/scripts.php」を開きます。197行目あたりから子テーマのCSSを呼び出す区分になっています。

////////////////////////////////////////////////////////////////
//
//子テーマ用スタイルシートの呼び出し
//
////////////////////////////////////////////////////////////////

  ///////////////////////////////////////////
  //子テーマが存在しているときだけに呼び出すスタイル
  ///////////////////////////////////////////
  if ( is_child_theme_enable() ) {
    //子テーマのstyle.css
    wp_enqueue_style( 'child-style',  get_stylesheet_directory_uri() . 'style.css', array('simplicity-style', 'simplicity-style') );
    //子テーマのresponsive.css
    if ( is_responsive_enable() ) {
      //完全レスポンシブ表示用のスタイル
      wp_enqueue_style( 'child-responsive-mode-style',  get_stylesheet_directory_uri() . '/responsive.css', array('simplicity-style') );
    }
    //子テーマのmobile.css
    if ( is_mobile() && !is_responsive_enable() ) {
      wp_enqueue_style( 'child-mobile-style',  get_stylesheet_directory_uri() . '/mobile.css', array('simplicity-style') );
    }
  }

私は下記のPCで使われている子テーマのCSSのパスを変更しました。

wp_enqueue_style( 'child-style',  get_stylesheet_directory_uri() . '/style.css', array('simplicity-style', 'simplicity-style') );

上記を

wp_enqueue_style( 'child-style',  get_stylesheet_directory_uri() . '/dist/css/style.css', array('simplicity-style', 'simplicity-style') );

と変更しました。

Gulpでminify(圧縮)され、保存されたCSSは「dist/css/」にあるので、「/dist/css/style.css」としています。

確認

変更を加えたファイルを本番に上げ、「scripts.php」で変更したCSSのパスが「/dist/css/style.css」となっていることを確認します。

Gulpで圧縮され保存されたCSSのパス
Gulpで圧縮され保存されたCSSのパス

次にパスをクリックすると下記のようなCSSが表示されました。

minify(圧縮)されたCSS
minify(圧縮)されたCSS

PCで利用している子テーマのCSSがminify(圧縮)されていることを確認しました。

まとめ

  • 「Nodist」をインストールする。
  • 「Node.js」をインストールする。
  • グローバルに「Gulp」をインストールする。
  • プロジェクトフォルダに移動する。
  • 「package.json」ファイルを作成する。
  • プロジェクトフォルダに「Gulp」をインストールする。
  • 「gulpfile.js」を作成する。
  • 「gulp-minify-css」プラグインをインストールする。
  • 自動でCSSをminify(圧縮)するようにする。
  • minify(圧縮)された子テーマのCSSを読み込ませる。
  • minify(圧縮)されたCSSを確認する。

カスタマイズするために「Simplicity」の子テーマでよく作業をするので、今回はGulpを「simplicity2-child」に設置してみました。本来であれば、通常は親テーマと同じ階層で「Gulp」を設置すると思います。

「Gulp」はコマンドで入力するので、敷居が高くとっつきにくいと思っていましたが、意外とすんなり利用できて驚いています。「Gulp」はいろいろと便利なプラグインなどが他にもたくさんあるようなので、気になった方は試してみることをお勧めします。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

Windowsに「Node.js」 と「Gulp.js」をインストールして、WordPressテーマのSimplicityの子テーマにあるCSSをMinify化して読み込んでみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!