WordPressをPug + Stylus + TypeScriptで構築

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以下を保存してます。

docker-compose.yml

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超初心者ですが)

gulpfile.js

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~😁♪