WordPress のテーマ開発に絶対必須な gulp プラグイン９選！

更新 : 2024/05/02

カテゴリー : WordPress, プログラミング・Web

by : It is R

3Dゲームに酔ってしまう@It_is_Rです。
今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていきます。

gulp について
ディレクトリについて
gulp-sass
gulp-pug
gulp-rename
pug-php-filter
gulp-babel
gulp-watch
gulp-plumber
browser-sync
run-sequence
まとめ。（全体の gulpfile.js サンプル）

gulp について

gulpは、sassのコンパイルをはじめとし、様々なことを自動で行ってくれる、タスクランナーと呼ばれるものです。

gulp

詳しい使い方はこちらのページをご覧ください。
gulpでsassをcssにコンパイル。インストール＆便利な使い方。

ディレクトリについて

今回はこのようなフォルダ構成になっております。

theme/
∟vccw/wordpress/wp-content/themes/mytheme/
∟src/
    ∟js/
        ∟script.js
    ∟pug/
        ∟index.pug
    ∟sass/
        ∟style.sass
∟gulpfile.js
∟node_modules/

gulp-sass

gulp-sass は、 Sass を CSS にコンパイルしてくれるプラグインです。
Sass

SCSS , SASS どちらにも対応しています。

インストールは以下のコマンドを入力してください。

$ npm install gulp-sass --save-dev

私は SASS 派ですので、SASSの例を挙げておきます。

gulpfile.js

'use strict';

const
gulp = require('gulp'),
sass = require('gulp-sass');

gulp.task('sass', () => {
	gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

例
コンパイル前(style.sass)

.nav
  padding: 0
  margin: 0
  &.nav--horizontal
    display: table
    width: 100%
    table-layout: fixed
    list-style: none

コンパイル後(style.css)

.nav {
  padding: 0;
  margin: 0; }
  .nav.nav--horizontal {
    display: table;
    width: 100%;
    table-layout: fixed;
    list-style: none; }

SASS と SCSS の違いを知りたい人は、こちらの記事をご覧ください。
SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ！

※SASS を強要するものではありません。

gulp-pug

gulp-pug で、Pug を HTML にコンパイルできます。

インストールは以下のコマンドを入力してください。

$ npm install gulp-pug --save-dev

gulpfile.js

'use strict';

const
gulp = require('gulp'),
pug = require('gulp-pug');

gulp.task('pug', () => {
	gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

例
コンパイル前(index.pug)

doctype html
html
	head
		title タイトル
	body
		h1 見出し
		p 本文

コンパイル後(index.html)

<!DOCTYPE html><html><head><title>タイトル</title></head><body><h1>見出し</h1><p>本文</p></body></html>

ただ、このままでは HTML ファイルが出力されてしまいますので、 WordPress のテーマを作ることができません。
そこで、 HTML を PHP に変換（リネーム）します。

gulp-rename

gulp-rename を使うことで、拡張子を変更することができます。

インストールは以下のコマンドを実行してください。

$ npm install gulp-rename --save-dev

gulpfile.js

'use strict';

const
gulp	= require('gulp'),
pug	= require('gulp-pug'),
rename	= require('gulp-rename');

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(rename({
		extname: '.php'
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

これで、 HTML ではなく PHP ファイルが吐き出されます。
しかし、 Pug を使う上で、 PHP を使うには、少し工夫が必要です。

一つは、 | などの記号を使って、書く方法もありますが、今回は Pug で PHP が使えるプラグインを使おうと思います。

pug-php-filter

pug-php-filter を使えば、 Pug 上で簡単に PHP を使うことができます。

インストールは以下のコマンドを実行してください。

$ npm install pug-php-filter --save-dev

gulpfile.js

'use strict';

const
gulp		= require('gulp'),
pug		= require('gulp-pug'),
rename		= require('gulp-rename'),
pugPHPFilter	= require('pug-php-filter');

gulp.task('pug', () => {
	let option = {
		pretty: true,
		filters: {
			php: pugPHPFilter
		}
	}
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug(option))
	.pipe(rename({
		extname: '.php'
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

例
コンパイル前(index.pug)

doctype html
html
	head
		title タイトル
	body
		:php
			echo "hello world";

コンパイル後(index.html)

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body><?php echo "hello world"; ?></body>
</html>

gulp-babel

gulp-babel を使うと、 ES6 以降のソースを、古いブラウザでも使えるように変換してくれます。

Babel

gulp-babel と同時に、 babel-preset-env も使うといいと思います。

インストール

$ npm install gulp-babel babel-preset-env --save-dev

gulpfile.js

'use strict';

const
gulp = require('gulp'),
babel = require('gulp-babel');

gulp.task('babel', () => {
	return gulp.src('theme/src/js/**/*.js')
	.pipe(babel({
		presets: ['env']
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme/js'));
});

script.js （コンパイル前）

class Monster {
    constructor(name, atk, def) {
        this.name = name;
        this.atk = atk;
        this.def = def;
    }
    info() {
        console.log(`名前 : ${this.name}
攻撃力 : ${this.atk}
守備力 : ${this.def}`);
    }
}
 
let slime = new Monster('スライム', 120, 150);
let zombie = new Monster('ゾンビ', 300, 230);
let dragon = new Monster('ドラゴン', 15300, 14200);
 
slime.info();
zombie.info();
dragon.info();

script.js （コンパイル後）

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Monster = function () {
    function Monster(name, atk, def) {
        _classCallCheck(this, Monster);

        this.name = name;
        this.atk = atk;
        this.def = def;
    }

    _createClass(Monster, [{
        key: 'info',
        value: function info() {
            console.log('\u540D\u524D : ' + this.name + '\n\u653B\u6483\u529B : ' + this.atk + '\n\u5B88\u5099\u529B : ' + this.def);
        }
    }]);

    return Monster;
}();

var slime = new Monster('スライム', 120, 150);
var zombie = new Monster('ゾンビ', 300, 230);
var dragon = new Monster('ドラゴン', 15300, 14200);

slime.info();
zombie.info();
dragon.info();

gulp-watch

gulp-watch を使うことで、ファイルを監視し、変更があった場合に自動でタスクを実行します。
インストールは以下のコマンドを実行してください。

$ npm install gulp-watch --save-dev

gulpfile.js

'use strict';

const
gulp	= require('gulp'),
sass	= require('gulp-sass'),
pug	= require('gulp-pug'),
watch	= require('gulp-watch');

gulp.task('watch', () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('sass', 'pug');
	})
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

こうすることで、 sass や pug ファイルに変更があった時に、それぞれのコンパイルを実行します。

gulp-plumber

先ほど紹介した gulp-watch では、コードにエラーがあったりすると、強制終了してしまい、再度 gulp watch を実行する必要があります。
gulp-plumber を使うことで、強制終了を防ぐことができます。

インストール

$ npm install gulp-plumber --save-dev

gulpfile.js

'use strict';

const
gulp			= require('gulp'),
sass			= require('gulp-sass'),
pug				= require('gulp-pug'),
watch			= require('gulp-watch'),
plumber			= require('gulp-plumber');

gulp.task('watch', () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('sass', 'pug');
	})
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(plumber())
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(plumber())
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

browser-sync

browser-sync を使うことで、様々なブラウザや端末で同期させ、確認することができるようになります。
コンパイル時にブラウザを再読み込みする機能もありますが、それは後ほど紹介します。

インストール

$ npm install browser-sync --save-dev

今回は、 vccw にて、ローカル WordPress 環境を整えましたので、 proxy に vccw.test を指定します。

gulpfile.js

'use strict';

const
gulp		= require('gulp'),
sass		= require('gulp-sass'),
pug		= require('gulp-pug'),
watch		= require('gulp-watch'),
browserSync	= require('browser-sync').create();

gulp.task('watch', ['browserSync'], () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('sass', 'pug');
	})
});

gulp.task('browserSync', () => {
	browserSync.init({
		proxy: 'vccw.test'
	});
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

スマホで確認したい場合は、gulp watchを実行した時にターミナルに表示される、 Access URLs の External の右のアドレスをスマホで見れば、スマホとPCで同期することもできます。

[Browsersync] Access URLs:
 ---------------------------------------
Local: http://localhost:3000
External: http://192.168.xx.xxx:xxxx   <- この部分
 ---------------------------------------
 UI: http://localhost:3001
 UI External: http://192.168.xx.xxx:xxxx
 ---------------------------------------

run-sequence

run-sequence を使えば、 gulp のタスク処理の、並列、直列を指定することができます。
つまり、順番に行うタスクと、同時に行うタスクを指定できるということです。

というわけで、 run-sequence を使って、先ほど紹介した browser-sync のブラウザの再読み込み機能を、コンパイルが実行された後に行うというふうにしてみます。
インストール

$ npm install run-sequence --save-dev

gulpfile.js

'use strict';

const
gulp		= require('gulp'),
sass		= require('gulp-sass'),
pug		= require('gulp-pug'),
watch		= require('gulp-watch'),
browserSync	= require('browser-sync').create(),
runSequence	= require('run-sequence');

gulp.task('watch', ['browserSync'], () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('execution');
	})
});

gulp.task('execution', (calback) => {
	runSequence(
		['sass', 'pug'],
		'reload',
		calback
	)
});

gulp.task('reload', () => {
    browserSync.reload();
});

gulp.task('browserSync', () => {
	browserSync.init({
		proxy: 'vccw.test'
	});
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(pug())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

まとめ。（全体の gulpfile.js サンプル）

今回のまとめとして、使ったプラグインの設定全体の gulpfile.js のサンプルです。

gulpfile.js

'use strict';

const
gulp			= require('gulp'),
sass			= require('gulp-sass'),
pug				= require('gulp-pug'),
pugPHPFilter	= require('pug-php-filter'),
rename			= require('gulp-rename'),
babel			= require('gulp-babel'),
watch			= require('gulp-watch'),
plumber			= require('gulp-plumber'),
runSequence		= require('run-sequence'),
browserSync		= require('browser-sync').create();

gulp.task('watch', ['browserSync'], () => {
	return watch('theme/src/**/*.*', () => {
		gulp.start('execution');
	})
});

gulp.task('execution', (calback) => {
	runSequence(
		['sass', 'pug', 'babel'],
		'reload',
		calback
	)
});

gulp.task('browserSync', () => {
	browserSync.init({
		proxy: 'vccw.test'
	});
});

gulp.task('reload', () => {
    browserSync.reload();
});

gulp.task('sass', () => {
	return gulp.src('theme/src/sass/**/*.sass')
	.pipe(plumber())
	.pipe(sass())
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('pug', () => {
	let option = {
		pretty: true,
		filters: {
			php: pugPHPFilter
		}
	}
	return gulp.src('theme/src/pug/**/*.pug')
	.pipe(plumber())
	.pipe(pug(option))
	.pipe(rename({
		extname: '.php'
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme'));
});

gulp.task('babel', () => {
	return gulp.src('theme/src/js/**/*.js')
	.pipe(plumber())
	.pipe(babel({
		presets: ['env']
	}))
	.pipe(gulp.dest('vccw/wordpress/wp-content/themes/mytheme/js'));
});

自分の環境に合わせて、使ってください。
以上、WordPress のテーマ開発に、絶対必須な gulp プラグイン９選とその使い方でした。