WordPressをPugでかけるという情報を聞いて、ちょうどGulpかけるようになったきたのでついでに構築してみました。
割と良さそうだったので、誰でも使えるようにサンプル置いておきます。
Githubのソースコードでは使いやすいようにwp-content/themes/my-theme -> src/my-theme
にシンボリックリンク張っていますがいらなければ削除して使用してください。
How to use
以下の手順でいけるはず...。
git clone git@github.com:usu-blog/wp-pug.git
cd wp-pug
docker-compose up -d
yarn
yarn start
WordPress
WordPressはDockerComposeで構築しました。
Volumesは、カレントディレクトリにmysqlのデータとwp-content以下を保存してます。
version: "3"
services:
wordpress:
container_name: wordpress
image: wordpress
environment:
VIRTUAL_HOST: test.local
WORDPRESS_DB_PASSWORD: root
WORDPRESS_DB_NAME: test-wp
restart: always
volumes:
- ./wp-content:/var/www/html/wp-content/
ports:
- "80:80"
links:
- mysql
mysql:
container_name: mysql
image: mysql:5.7
volumes:
- ./mysql:/var/lib/mysql
ports:
- "3306:3306"
environment:
MYSQL_ROOT_PASSWORD: root
restart: always
一応バーチャルホスト登録しておきました。
VIRTUAL_HOST: test.local
なので/etc/hosts
に以下のように保存すれば
127.0.0.1 localhost test.local
ブラウザでtest.local
でアクセスできます。
Gulp
Gulp4の書き方は、Gulpっぽく書くのかJSっぽく書くのかという2つの選択肢があるようですが
私は、JSっぽく書くほうがわかりやすくて好きなのでこういう書き方しています。(Gulp超初心者ですが)
const gulp = require('gulp')
const rename = require('gulp-rename')
const stylus = require('gulp-stylus')
const pug = require('gulp-pug')
const ts = require('gulp-typescript')
const plumber = require('gulp-plumber') // エラー時の強制終了を防止
const notify = require('gulp-notify') // エラー発生時にデスクトップ通知する
const dist = "./wp-content/themes/my-theme"
// Styles
function styles() {
return gulp.src('./src/stylus/**/*.styl')
.pipe(stylus({
outputStyle: 'compressed',
'include css': true
// outputStyle: 'expanded'
}))
.pipe(gulp.dest(`${dist}`))
}
// Views
function views() {
return gulp.src('./src/views/**/*.pug')
.pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
.pipe(pug({
pretty: true
}))
.pipe(rename({
extname: '.php'
}))
.pipe(gulp.dest(`${dist}/`))
}
// TypeScript
function typescript(){
return gulp.src('./src/ts/**/*.ts')
.pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
.pipe(ts({
target: 'ES5',
noImplicitAny: true,
outFile: 'dist.js'
}))
.pipe(gulp.dest(`${dist}/js/`))
}
// Watch
function watch() {
gulp.watch('./src/stylus/**/*.styl', styles)
gulp.watch('./src/views/**/*.pug', views)
gulp.watch('./src/ts/**/*.ts', typescript)
}
exports.styles = styles;
exports.views = views;
exports.typescript = typescript;
exports.watch = watch;
gulp.task('default', gulp.series(gulp.parallel(styles, views, typescript, watch)));
最後に
何かうまく動かずエラーが出てたら報告お願いいたします。
それでは、Happy Hacking~😁♪