Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

WordPressをPug + Stylus + TypeScriptで構築

More than 1 year has passed since last update.

WordPressをPugでかけるという情報を聞いて、ちょうどGulpかけるようになったきたのでついでに構築してみました。

割と良さそうだったので、誰でも使えるようにサンプル置いておきます。

Githubはこちら

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

usu_blog
2019年1月にWEBエンジニアデビューしました。 React/Next.js, Vue.js/Nuxt.js, TypeScript, Node.js, Firebase, Laravel, STUDIO
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away