Gulp 설정(WP/scss 및 php에만 해당)

Gulp로 Word Press를 개발하고 싶어서 해봤어요.
WP 주제/themes/テーマ名/를 루트로 가정합니다.

.scss/assets/scss/→/assets/css/출력

.scss＆.php가 업데이트되었을 때 브라우저-sync에서 브라우저를 다시 불러옵니다
의 두 임무에 대한 설정입니다.

컨디션

node v15.3.0
로컬 WordPress 환경에서는 Local을 사용합니다.
(시도는 안 해봤지만 로컬에서 운영되는 WP의 웹사이트를 워커로 바꿔도 움직일 것 같다.)

큰 가방

원하는 포장 관리자에 추가하세요.
나는 그림과 글이 귀여운 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://olein-design.com/blog/build-task-runner-for-web-developing
https://shuu1104.com/2021/06/3352/#toc2
돈의 뜻 등 자세한 작법을 읽지 못했기 때문에 조만간 다시 읽을게요...
2021/11/14
scss 컴파일할 때 브라우저-sync가 움직이지 않아watchFiles 부분을 수정했습니다