Gulp 使用笔记：

---

总结：Gulp 使用情况

1. 目标：

   • 实现 HTML 模块化（如页头、页尾的复用）
   • 将 src 目录下的所有文件（包括子文件夹和静态资源）发布到 dist 目录
   • 确保 Layui 字体文件等二进制资源在构建过程中不被损坏

2. 当前问题：

   • 字体文件在构建后损坏（可能被误处理为文本文件）
   • 需要统一修改请求路径前缀（如 /api/v1）

3. 已实现功能：

   • 使用 gulp-file-include 实现 HTML 模块化
   • 使用 gulp.src 和 gulp.dest 复制静态资源
   • 通过 gulp-debug 调试文件处理流程

4. 待优化点：

   • 确保二进制文件（如字体、图片）不被误处理
   • 统一修改请求路径前缀
   • 支持更复杂的构建流程（如压缩 CSS/JS、编译 Sass）

---

后续需要安装的插件

以下是实现上述功能所需的 Gulp 插件：

插件名称	作用	安装命令
gulp	Gulp 核心库	npm install gulp --save-dev
gulp-file-include	HTML 模块化（支持传参）	npm install gulp-file-include --save-dev
gulp-debug	调试文件处理流程	npm install gulp-debug --save-dev
gulp-clean-css	压缩 CSS 文件	npm install gulp-clean-css --save-dev
gulp-uglify	压缩 JS 文件	npm install gulp-uglify --save-dev
gulp-imagemin	压缩图片文件	npm install gulp-imagemin --save-dev
gulp-rename	重命名文件	npm install gulp-rename --save-dev
gulp-replace	替换文件内容（如路径前缀）	npm install gulp-replace --save-dev

---

后续需要执行的命令

1. 初始化项目（如果未初始化）：

   bash
   npm init -y
   

2. 安装插件：

   bash
   npm install gulp gulp-file-include gulp-debug gulp-clean-css gulp-uglify gulp-imagemin gulp-rename gulp-replace --save-dev
   

3. 修改 package.json： 添加 "type": "module"，告诉 Node.js 使用 ESM：

   json
   {
     "type": "module"
   }
   

4. 运行 Gulp 任务：

   • 开发模式（监听文件变化）：

     bash
     gulp
     

   • 生产模式（仅构建一次）：

     bash
     gulp build
     

---

优化后的 gulpfile.js 示例（ESM 语法）

以下是整合后的 Gulp 配置文件，支持 HTML 模块化、静态资源复制、路径替换等功能：

javascript
const gulp = require('gulp');
const fileInclude = require('gulp-file-include');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const replace = require('gulp-replace');
const debug = require('gulp-debug');

// 配置
const API_BASE = '/dist/'; // 统一路径前缀

// 任务 1：处理 HTML 文件（模块化）
function html() {
  return gulp.src('src/**/*.html')
    .pipe(fileInclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(replace(/(href|src)="\.\/([^"]+)"/g, `$1="${API_BASE}$2"`)) // 替换相对路径为绝对路径
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: 'HTML 文件已处理:' }));
}

// 任务 2：复制字体文件
function copyFonts() {
  return gulp.src('src/**/*.{woff,woff2,ttf}')
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: '字体文件已复制:' }));
}

// 任务 3：复制图片文件
function copyImages() {
  return gulp.src('src/**/*.{jpg,jpeg,png,gif,svg}')
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: '图片文件已复制:' }));
}

// 任务 4：复制 YML 文件
function copyYmlFiles() {
  return gulp.src('src/**/*.yml')
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: 'YML 文件已复制:' }));
}
// 任务 4：复制 YML 文件
function copyPropertiesFiles() {
  return gulp.src('src/**/*.properties')
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: 'properties 文件已复制:' }));
}

// 任务 5：复制 JSON 文件
function copyJsonFiles() {
  return gulp.src('src/**/*.json')
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: 'JSON 文件已复制:' }));
}

// 任务 6：压缩 CSS
function css() {
  return gulp.src('src/**/*.css')
    //.pipe(cleanCSS()) // 压缩CSS
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: 'CSS 文件已压缩:' }));
}

// 任务 7：压缩 JS
function js() {
  return gulp.src('src/**/*.js')
    //.pipe(uglify()) // 压缩JS
    .pipe(gulp.dest('dist/'))
    .pipe(debug({ title: 'JS 文件已压缩:' }));
}

// 默认任务（开发模式）
function defaultTask() {
  // 并行执行所有任务
  gulp.parallel(html, copyFonts, copyImages, copyYmlFiles, copyJsonFiles, copyPropertiesFiles, css, js)();

  // 监听文件变化
  gulp.watch('src/**/*.html', html);
  gulp.watch('src/**/*.css', css);
  gulp.watch('src/**/*.js', js);
  gulp.watch('src/**/*.yml', copyYmlFiles);
  gulp.watch('src/**/*.json', copyJsonFiles);
  gulp.watch('src/**/*.{woff,woff2,ttf}', copyFonts);
  gulp.watch('src/**/*.{jpg,jpeg,png,gif,svg}', copyImages);
  gulp.watch('src/**/*.properties', copyPropertiesFiles);
}

// 生产模式任务
const build = gulp.parallel(html, copyFonts, copyImages, copyYmlFiles, copyJsonFiles, copyPropertiesFiles, css, js);

// 导出任务
exports.html = html;
exports.copyFonts = copyFonts;
exports.copyImages = copyImages;
exports.copyYmlFiles = copyYmlFiles;
exports.copyJsonFiles = copyJsonFiles;
exports.copyPropertiesFiles = copyPropertiesFiles;
exports.css = css;
exports.js = js;
exports.default = defaultTask;
exports.build = build;

---

关键点说明

1. 路径替换：
   • 使用 gulp-replace 将所有 href="/xxx" 替换为 href="/api/v1/xxx"。
2. 二进制文件处理：
   • 在 copyAssets 任务中设置 buffer: false，避免二进制文件被误处理。
3. 任务并行化：
   • 使用 gulp.parallel 并行执行任务，提升构建速度。

---

运行效果

1. 开发模式：
   • 执行 gulp 后，Gulp 会监听文件变化并自动构建。
2. 生产模式：
   • 执行 gulp build 后，Gulp 会一次性构建所有文件并输出到 dist 目录。

---

通过以上配置，你的 Gulp 构建流程将更加完善，能够满足 HTML 模块化、静态资源复制、路径替换等需求，同时支持 ESM 语法。