WordPressローカル環境構築

$ mkdir _gulp

$ cd _gulp

$ npm init -y

18.17.1

$ nvm use

$ npm i gulp gulp-dart-sass gulp-plumber gulp-notify browser-sync

cat ~/.zshrc

vim ~/.zshrc

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

{
  "name": "_gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.29.3",
    "gulp": "^4.0.2",
    "gulp-dart-sass": "^1.1.0",
    "gulp-notify": "^4.0.0",
    "gulp-plumber": "^1.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "gulp-postcss": "^9.0.1"
  }
}

const gulp = require("gulp"); //gulp本体

//scss
const sass = require("gulp-dart-sass"); //Dart Sass はSass公式が推奨 @use構文などが使える
const plumber = require("gulp-plumber"); // エラーが発生しても強制終了させない
const notify = require("gulp-notify"); // エラー発生時のアラート出力
const browserSync = require("browser-sync"); //ブラウザリロード
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");

gulp.task("default", function () {
  return gulp.src("src/test.css")
    .pipe(postcss([
      autoprefixer({
        browsers: [
            "last 2 versions", 
            "ie >= 11", 
            "Android >= 4"
        ],
        cascade: false
      })
    ]))
    .pipe(gulp.dest("benpre"));
});

// 入出力するフォルダを指定
const srcBase = "../static/html";
const assetsBase = "../assets";
const distBase = "../";

const srcPath = {
  scss: assetsBase + "/scss/**/*.scss",
  html: srcBase + "/**/*.php",
};

const distPath = {
  css: distBase + "/css/",
  html: distBase + "/",
};

/**
 * sass
 *
 */
const cssSass = () => {
  return gulp
    .src(srcPath.scss, {
      sourcemaps: true,
    })
    .pipe(
      //エラーが出ても処理を止めない
      plumber({
        errorHandler: notify.onError("Error:<%= error.message %>"),
      })
    )
    .pipe(sass({ outputStyle: "expanded" })) //指定できるキー expanded compressed
    .pipe(gulp.dest(distPath.css, { sourcemaps: "./" })) //コンパイル先
    .pipe(browserSync.stream())
    .pipe(
      notify({
        message: "Sassをコンパイルしました！",
        onLast: true,
      })
    );
};

/**
 * html
 */
const html = () => {
  return gulp.src(srcPath.html).pipe(gulp.dest(distPath.html));
};

/**
 * ローカルサーバー立ち上げ
 */
const browserSyncFunc = () => {
  browserSync.init(browserSyncOption);
};

const browserSyncOption = {
  proxy: "http://localhost:8888/toku/",
  open: "true",
  watchOptions: {
    debounceDelay: 1000,
  },
  reloadOnRestart: true,
};

/**
 * リロード
 */
const browserSyncReload = (done) => {
  browserSync.reload();
  done();
};

/**
 *
 * ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す
 * series 順番に実行
 * watch('監視するファイル',処理)
 */
const watchFiles = () => {
  gulp.watch(srcPath.scss, gulp.series(cssSass));
  gulp.watch(srcPath.html, gulp.series(html, browserSyncReload));
};

/**
 * seriesは「順番」に実行
 * parallelは並列で実行
 */
exports.default = gulp.series(
  gulp.parallel(html, cssSass),
  gulp.parallel(watchFiles, browserSyncFunc)
);

$ npx gulp

function my_theme_styles_and_scripts() {
  if ( ! is_admin() ) {
    $version = filemtime(get_template_directory() . '/css/style.css');
    wp_enqueue_style('my-style', get_template_directory_uri() . '/css/style.css', array(), $version);

    $version = filemtime(get_template_directory() . '/js/common.js');
    wp_enqueue_script('my-script', get_template_directory_uri() . '/js/common.js', array(), $version, true);
  }
}

function my_admin_theme_style() {
  wp_enqueue_style('my-admin-theme', get_template_directory_uri() . '/admin-style.css');
}

add_action('admin_enqueue_scripts', 'my_admin_theme_style');

body {
  font-family: "MS Pゴシック", sans-serif; 
}