WordPress #5 | WPテーマの開発にbrowserSyncのホットリロードを使う

2023.07.28（金） 22:42

sell

WordPress開発5日目。
フロントページのコンテンツ部分を実装していく。頻繁にテンプレートタグの記述をして、CSSでスタイルを組んでいく事になるのでいちいちブラウザのリロードをするのが面倒だ。
今回はWebサーバーの機能はLocalで動かしているので、シンプルにgulpのファイル監視と組み合わせてホットリロードをしてくれれば良いという事になる。

そこで、今回はbrowserSyncを使って要件をクリアすることにした。
追加でインストールしたのはbrowserSyncのみで、gulpの起動でbrowserSyncのプロキシサーバーを起動。テンプレートファイルのPHP、コンパイル済みのCSS、JSファイルの変更監視をトリガーにホットリロードをする。

# npm install -D browser-sync

gulpfile.js

// gulpプラグインの読み込み
const gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
const sass = require("gulp-sass")(require("sass"));
// TypeScriptをコンパイルするプラグインの読み込み
const ts = require("gulp-typescript");
// BrowserSync
const bs = require("browser-sync");

// TypeScript設定
const tsProject = ts.createProject("./tsconfig.json");
const srcFile = "./src/main.ts";
const output = "./assets/js";

/**
 * SCSSファイルのコンパイルタスク
 */
function scss(cb) {
  gulp.watch("src/styles/**/*.scss", () => {
    // style.scssの更新があった場合の処理
    // style.scssファイルを取得
    return (
      gulp
        .src("src/styles/style.scss")
        // Sassのコンパイルを実行
        .pipe(
          sass({
            outputStyle: "expanded",
            sourceComments: true
          })
            // Sassのコンパイルエラーを表示
            // (これがないと自動的に止まってしまう)
            .on("error", sass.logError)
        )
        // cssフォルダー以下に保存
        .pipe(gulp.dest("./"))
    );
  });
  cb();
}

/**
 * TypeScriptのコンパイルタスク
 */
function typescript(cb) {
  gulp.watch("src/**/*.ts", () => {
    return (
      gulp
        .src(srcFile)
        .pipe(tsProject())
        .pipe(gulp.dest(output))
    )
  });
  cb();
}

/**
 * browserSyncの起動
 */
function bsInit(cb) {
  bs.init({
    proxy: "momo-matium.local",
    notify: false,
    open: "external",
    injectChanges: false
  });
  cb();
}

/**
 * ホットリロード
 */
function bsReload(cb) {
  gulp.watch(["./**/*.php", "./**/*.css", "./assets/**/*.js"]).on('change', bs.reload);
  cb();
}

exports.default = gulp.series(bsInit, scss, typescript, bsReload);