hugulp 项目教程

1. 项目的目录结构及介绍

hugulp 项目的目录结构如下：

hugulp/
├── docker/
├── gulp/
├── metadata/
├── scripts/
├── .gitignore
├── .prettierrc
├── CHANGES
├── LICENSE
├── README.md
├── VERSION
├── index.js
├── package-lock.json
├── package.json
└── hugulprc

目录结构介绍

• docker/: 包含与 Docker 相关的文件和配置。
• gulp/: 包含 Gulp 任务和配置文件。
• metadata/: 包含项目元数据文件。
• scripts/: 包含项目脚本文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置文件。
• CHANGES: 项目变更日志。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• VERSION: 项目版本文件。
• index.js: 项目入口文件。
• package-lock.json: npm 包锁定文件。
• package.json: npm 包配置文件。
• hugulprc: hugulp 配置文件。

2. 项目的启动文件介绍

index.js

index.js 是 hugulp 项目的入口文件。它负责初始化项目并启动 Gulp 任务。以下是 index.js 的主要功能：

• 加载 Gulp 任务配置。
• 初始化 Gulp 任务。
• 启动 Gulp 监听任务，监听文件变化并自动执行相关任务。

3. 项目的配置文件介绍

hugulprc

hugulprc 是 hugulp 项目的配置文件，用于定义项目的各种配置选项。以下是 hugulprc 的主要配置项：

{
  "version": 2,
  "pipeline": ["images", "styles", "scripts", "fingerprint", "html"],
  "path": {
    "styles": "styles",
    "images": "images",
    "scripts": "scripts"
  },
  "watch": {
    "source": "assets",
    "target": "static"
  },
  "build": {
    "source": "public",
    "target": "public"
  },
  "autoprefixer": {
    "browsers": ["last 2 versions"]
  },
  "cleancss": {
    "advanced": false
  },
  "htmlmin": {
    "collapseWhitespace": true
  },
  "gifsicle": {
    "interlaced": true
  },
  "jpegtran": {
    "progressive": true
  },
  "optipng": {
    "optimizationLevel": 5
  },
  "svgo": {
    "plugins": [
      { "removeViewBox": true },
      { "cleanupIDs": false }
    ]
  }
}

配置项介绍

• version: 配置文件版本号。
• pipeline: 定义需要执行的 Gulp 任务序列。
• path: 定义资源文件的路径。
• watch: 定义监听文件变化的配置。
• build: 定义构建任务的配置。
• autoprefixer: 定义 autoprefixer 的配置。
• cleancss: 定义 clean-css 的配置。
• htmlmin: 定义 htmlmin 的配置。
• gifsicle: 定义 gifsicle 的配置。
• jpegtran: 定义 jpegtran 的配置。
• optipng: 定义 optipng 的配置。
• svgo: 定义 svgo 的配置。

通过这些配置项，可以灵活地定制 hugulp 项目的行为，以满足不同的需求。