package.json

scripts（変更前）

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

scripts（変更後）

"scripts": {
  "dev": "cross-env NODE_ENV=local gulp dev",
  "build": "cross-env NODE_ENV=local gulp",
  "build:xserver": "cross-env NODE_ENV=xserver gulp"
},

tailwind.config.js

content（変更前）

content: [],

content（変更後）

content: ["./html/src/**/*.{pug,scss}"],

.env

.envの*_XSERVERの設定は、レンタルサーバのドメインに合わせて書き換えるなり。

VERSION="1.0.0-2000.0101.1230"

DOMAIN_LOCAL="http://localhost:8880"
DOMAIN_XSERVER="https://phew.gothicum.xyz"

DOCROOT_LOCAL="/"
DOCROOT_XSERVER="/"

SUBDIR_LOCAL=""
SUBDIR_XSERVER=""

PUBLIC_LOCAL=""
PUBLIC_XSERVER=""

gulpfile.mjs

/**
 * load package
 */
import { configDotenv } from "dotenv";

import { watch, series, src, dest } from 'gulp';
import gulpPlumber from 'gulp-plumber';
import gulpFilter from 'gulp-filter';

import rename from 'gulp-rename';
import { glob } from 'glob';
import fs from 'fs-extra';

import sharpOptimizeImages from 'gulp-sharp-optimize-images';

import gulpPug from 'gulp-pug';

import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import gulpPostCss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import csso from 'postcss-csso';

/**
 * const variable
 */
const dotenvData = configDotenv({path: '.env'}).parsed ?? {};

const nodeEnv = (process.env.NODE_ENV ?? '').split('-');


/**
 * 必要なURLやPATHを.envから取得
 * @requires PRODモードのパス書き換えを忘れないように
 */
let dirpath = (() => {
  let mode = 'production-local';
  let strictAbsPath = [dotenvData?.DOMAIN_LOCAL, dotenvData?.DOCROOT_LOCAL, dotenvData?.SUBDIR_LOCAL].join('');
  let rootAbsPath = [dotenvData?.DOCROOT_LOCAL, dotenvData?.SUBDIR_LOCAL].join('');
  let innerPublicPath = [dotenvData?.PUBLIC_LOCAL].join('');
  let outerPublicPath = [dotenvData?.DOMAIN_LOCAL, dotenvData?.DOCROOT_LOCAL, dotenvData?.SUBDIR_LOCAL, dotenvData?.PUBLIC_LOCAL].join('');
  let version = dotenvData?.VERSION ?? '';

  let isTerminate = false;

  for(let i = 0, l = nodeEnv.length; i < l; i ++){
    switch(nodeEnv[i]){
      case 'xserver':
        mode = 'production-' + nodeEnv[i];
        strictAbsPath = [dotenvData?.DOMAIN_XSERVER, dotenvData?.DOCROOT_XSERVER, dotenvData?.SUBDIR_XSERVER].join('');
        rootAbsPath = [dotenvData?.DOCROOT_XSERVER, dotenvData?.SUBDIR_XSERVER].join('');
        innerPublicPath = [dotenvData?.PUBLIC_XSERVER].join('');
        outerPublicPath = [dotenvData?.DOMAIN_XSERVER, dotenvData?.DOCROOT_XSERVER, dotenvData?.SUBDIR_XSERVER, dotenvData?.PUBLIC_XSERVER].join('');
        isTerminate = true;
      break;
    }

    if(isTerminate) break;
  }

  return {
    mode: mode,
    strictAbsPath: strictAbsPath,
    rootAbsPath: rootAbsPath,
    innerPublicPath: innerPublicPath,
    outerPublicPath: outerPublicPath,
    version: version,
  }
})();


/**
 * task: copy
 * @listens html/src/public/*
 * @exports html/app*
 */
const task_copy = async done => {
  let promises = [];
  let files = await glob('./html/src/public/**/!(_)*', {ignore: 'node_modules/**', dot: true});
  const reg = new RegExp("^html[\\\\/]src[\\\\/]public");

  files.forEach(file => {
    promises.push(new Promise((resolve, reject) => {
      const outName = file.replace(reg, 'html/app');

      fs.copy(file, outName)
      .then(() => {
        resolve();
      })
      .catch(e => {
        reject(e.message);
      })
      ;
    }));
  });

  Promise.allSettled(promises)
  .finally(() => {
    done();
  })
  ;
};


/**
 * task: copy & minify
 * @listens html/src/img/*
 * @exports html/app/img/*
 */
const task_img = async done => {
  const png = gulpFilter('**/*.png', {restore: true});
  const jpg = gulpFilter('**/*.jpg', {restore: true});

  src('./html/src/img/**/*.*', {
    allowEmpty: true,
  })
  .pipe(gulpPlumber())

  .pipe(png)
  .pipe(sharpOptimizeImages({
    png_to_webp: {
      quality: 80,
      lossless: false,
    },
    png: {},
  }))
  .pipe(png.restore)

  .pipe(jpg)
  .pipe(sharpOptimizeImages({
    jpg_to_webp: {
      quality: 80,
      lossless: false,
    },
    jpg: {
      quality: 80,
      mozjpeg: true,
    },
  }))
  .pipe(jpg.restore)

  .pipe(dest('./html/app/img'))
  ;

  done();
};


/**
 * task: html
 * @listens html/src/*
 * @exports html/app/*
 */
const task_html = done => {
  src('./html/src/**/!(_)*.pug', {
    allowEmpty: true,
  })
  .pipe(gulpPlumber())
  .pipe(gulpPug({
    locals: {
      mode: dirpath.mode,
      strictAbsPath: dirpath.strictAbsPath,
      rootAbsPath: dirpath.rootAbsPath,
      innerPublicPath: dirpath.innerPublicPath,
      outerPublicPath: dirpath.outerPublicPath,
      version: dirpath.version,
    },
    filters: {
      "php": text => "<?php\r\n" + text + "\r\n?>"
    },
  }))
  .pipe(rename({
    extname: '.php',
  }))
  .pipe(dest('./html/app'))
  ;

  done();
}


/**
 * task: css
 * @listens html/src/css/*
 * @exports html/app/css/*
 */
const task_css = done => {
  src('./html/src/**/!(_)*.scss', {
    arrowEmpty: true,
    sourcemaps: true,
  })
  .pipe(gulpPlumber())
  .pipe(sass({
    outputStyle: 'expanded',
  }))
  .pipe(gulpPostCss([
    autoprefixer(),
    tailwindcss(),
    csso(),
  ]))
  .pipe(dest('./html/app', {
    sourcemaps: '.',
  }))
  ;

  done();
};


/**
 * task: js
 * @listens html/src/js/*
 * @exports html/app/js/*
 */
import * as esbuild from 'esbuild'

const task_js = async done => {
  let files = await glob('html/src/js/**/!(_)*.{js,ts}', {ignore: 'node_modules/**'})

  await esbuild.build({
    entryPoints: files,
    outdir: 'html/app/js',
    target: ['es6'],
    bundle: true,
    minify: true,
    sourcemap: true,
    logLevel: 'info',
  })

  done()
};


/**
 * task: watch
 */
const task_watch = done => {
  watch('./html/src/public/**/*', series(task_copy, task_writeDev));
  watch('./html/src/img/**/*', series(task_img, task_writeDev));
  watch('./html/src/**/*.pug', series(task_html, task_writeDev));
  watch('./html/src/**/*.scss', series(task_css, task_writeDev));
  watch('./html/src/**/*.ts', series(task_js, task_writeDev));
  done();
};


const task_writeDev = done => {
  const time = Date.now()
  fs.writeJson('html/app/.gulp-dev', {time: time})
  .then(() => {
    console.log('dev file is written: ' + time.toString())
  })
  .catch(() => {
    console.log('fail to write a dev file')
  })
  .finally(() => {
    done()
  })
}


const task_removeDev = done => {
  fs.remove('html/app/.gulp-dev')
  .then(() => {
    console.log('dev file was removed')
  })
  .catch(() => {
    console.log('fail to remove a dev file')
  })
  .finally(() => {
    done()
  })
}


/**
 * exports
 */
export default series(
  task_removeDev,
  task_copy,
  task_img,
  task_html,
  task_css,
  task_js,
);

export const dev = series(
  task_copy,
  task_img,
  task_html,
  task_css,
  task_js,
  task_watch,
  task_writeDev,
);