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

「Nodist」をダウンロード

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

「Nodist」をインストール

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

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

コマンドで確認

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

nodist -v

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

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

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

nodist latest

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

node -v

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

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

npm -v

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

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

「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がすべて保存されます。