📝

Gulpの設定(WP向け/scssとphpのみ)

2021/11/13に公開

Gulp

Scss

WordPress

tech

GulpでWordPressの開発をしたいと思ったのでやってみました。
WPのテーマの/themes/テーマ名/をルートにした想定で、

.scssは /assets/scss/→/assets/css/に出力
.scss＆.phpが更新されたときにbrowser-syncでブラウザーのリロード
のこの2つのタスクの設定です。

環境

node v15.3.0
ローカルのWordPress環境としてLocalを使用。
(試してはいないが、ローカルで動かすWPのサイトドメインをwockerに変えても動くと思う。)

パッケージ

お好みのパッケージマネージャで追加して下さい。
私は絵文字が可愛いyarnが好きです。🚚

  "browser-sync": "^2.27.7",
  "gulp": "^4.0.2",
  "gulp-dart-sass": "^1.0.2"
  "gulp-notify": "^4.0.0",
  "gulp-plumber": "^1.2.1",
  "gulp-sass": "^5.0.0",
  "sass": "^1.43.4"

gulpfile.js

// gulpの読み込み
const gulp = require('gulp');
// Sass読み込み
const sass = require('gulp-dart-sass');
// browser-syncの読み込み
const browserSync = require('browser-sync');
// エラー時に終了させないための機能
const plumber = require('gulp-plumber');
// エラー発生時のアラート出力
const notify = require('gulp-notify');

const srcPath = {
  css: './assets/scss/**/*.scss',
  php: './**/*.php',
};

const destPath = {
  css: './assets/css/',
};

// .scssのコンパイルタスク
const compSass = () => {
  return (
    gulp
      .src(srcPath.css, {
        sourcemaps: true,
      })
      .pipe(
        plumber({
          // plumberのエラー表示(notify)
          errorHandler: notify.onError('Error!!:<%= error.message %>'),
        })
      )
      // コンパイル時のスタイル設定
      .pipe(sass({ outputStyle: 'expanded' }))
      // 保存先のファイルの指定
      .pipe(gulp.dest(destPath.css), { sourcemaps: './' })
      .pipe(browserSync.stream())
  );
};

const browserSyncFunc = () => {
  browserSync.init(browserSyncOption);
};

// browser-syncのオプション
const browserSyncOption = {
// Localで動かすWPのサイトドメイン
  proxy: 'http://xxx.local/',
  open: 'true',
  watchOptions: {
    debounceDelay: 1000,
  },
  reloadOnRestart: true,
};

const browserSyncReload = (done) => {
  browserSync.reload();
  done();
};

const watchFiles = () => {
  gulp.watch(srcPath.css, gulp.series(compSass, browserSyncReload));
  gulp.watch(srcPath.php, gulp.series(browserSyncReload));
};

// seriesで順番に実行
exports.default = gulp.series(
  gulp.parallel(compSass),
  gulp.parallel(watchFiles, browserSyncFunc)
);

参考にしたサイト

途中までうっかりGulp3までの書き方で書いてしまい、Gulp4の記事を参考にして書き直しました。
以下の記事のおかげで書き直すことが出来て助かりました、ありがとうございます。

https://tips-web.net/gulp4-windows/

https://shuu1104.com/2021/06/3352/#toc2

doneの意味など詳しい書き方まで読んでいないので、近いうちに改めて読みます。。。

2021/11/14
scssコンパイル時のbrowser-syncが動かなかったのでwatchFiles部分を修正

環境

パッケージ

gulpfile.js

参考にしたサイト

Discussion