GulpをWordPressで使う方法【テンプレ】

node -v

npm -v

{
  "name": "作業フォルダーの名前",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

オリジナルテーマフォルダー
　style.css（テーマ認識専用）
　phpファイル群
　dev
   node_modules（gulpインストール後に生成されるフォルダ）
   gulpfile.js（テンプレ有り）
　　package.json（テンプレ有り）
　　src
　　　assets
　　　　css
　　　　　style01.scss（全FLOCCSファイルを読み込むscssファイル）
　　　　sass
　　　　　scssファイル（FLOCCS）
　　　　image
　　　　　画像ファイル群
　　　　js
　　　　　javascriptファイル

{
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "browser-sync": "^2.29.1",
    "css-declaration-sorter": "^6.4.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-html-beautify": "^1.0.1",
    "gulp-merge-media-queries": "^0.2.1",
    "gulp-postcss": "^9.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-uglify": "^3.0.2",
    "postcss": "^8.4.23",
    "sass": "^1.62.1"
  },
  "browserslist":["defaults"]
}

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssSorter = require("css-declaration-sorter");
const mmq = require("gulp-merge-media-queries");
const browserSync = require("browser-sync");
const cleanCss = require("gulp-clean-css");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const htmlBeautify = require("gulp-html-beautify")

function compileSass() {
  return gulp
    .src("./src/assets/css/*.scss")
    .pipe(sass())
    .pipe(
      postcss([
        autoprefixer(),
        cssSorter({
          order: "smacss",
        }),
      ])
    )
    .pipe(mmq())
    .pipe(gulp.dest("../css/"))
    .pipe(cleanCss())
    .pipe(rename({
      suffix: ".min"
    }))
    .pipe(gulp.dest("../css/"))
}
// ファイルの変更を監視
function watch() {
  gulp.watch("./src/assets/**/*.scss", gulp.series(compileSass, browserReload));
  gulp.watch("./src/assets/js/**/*.js", gulp.series(minJS, browserReload));
  gulp.watch("./src/assets/image/**/*.js", gulp.series(copyImage, browserReload));
  gulp.watch("../**/*.php", browserReload);
}

// ブラウザの立ち上げ
function browserInit(done) {
  browserSync.init({
    // server: {
    //   baseDir: "./public/"
    // }
    proxy: "https://C001:8890"
  });
  done();
}

// ブラウザのリロード
function browserReload(done) {
  browserSync.reload();
  done();
}
// JSの圧縮
function minJS() {
  return gulp.src("./src/assets/js/**/*.js")
  .pipe(gulp.dest("../js/"))
  .pipe(uglify())
  .pipe(rename({
    suffix: ".min"
  }))
  .pipe(gulp.dest("../js/"))
}
// HTMLファイルのフォーマット
function formatHTML(){
  return gulp.src("./src/**/*.html")
  .pipe(htmlBeautify({
    indent_size: 2,
    indent_with_tabs: true,
  }))
  .pipe(gulp.dest("./public"))
}

function copyImage() {
  return gulp.src("./src/assets/image/**/*")
  .pipe(gulp.dest("../image/"))
}

exports.compileSass = compileSass;
exports.watch = watch;
exports.browserInit = browserInit;
exports.dev = gulp.parallel(browserInit, watch); 
exports.minJS = minJS; 
exports.formatHTML = formatHTML; 
exports.build = gulp.parallel(minJS, compileSass, copyImage); 

// ブラウザの立ち上げ
function browserInit(done) {
  browserSync.init({
    // server: {
    //   baseDir: "./public/"
    // }
    proxy: "https://C001:8890"
  });
  done();
}

cd dev

npm install

Local gulp not found in 「現在設定されているターミナルのフォルダ名」
Try running: npm install gulp

cd dev

npx gulp build

npx gulp dev

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db@latest
why you should do it regularly: https://github.com/browserslist/update-db#readme

ユーザー名@コンピューター名 テーマ名 % cd dev
ユーザー名@コンピューター名 dev % npx browserslist@latest --update-db   

Need to install the following packages:
browserslist@4.23.0
Ok to proceed? (y) y

The --update-db command is deprecated.
Please use npx update-browserslist-db@latest instead.
Browserslist DB update will still be made.
Latest version:     1.0.30001597
Installed version:  1.0.30001597
caniuse-lite is up to date
caniuse-lite has been successfully updated

ユーザー名@コンピューター名 dev % npx update-browserslist-db@latest

Need to install the following packages:
update-browserslist-db@1.0.13
Ok to proceed? (y) y

Latest version:     1.0.30001597
Installed version:  1.0.30001597
caniuse-lite is up to date
caniuse-lite has been successfully updated