Gulp 模板项目使用教程

Gulp 模板项目使用教程

1. 项目目录结构及介绍

gulp-template/
├── build/
│   └── （优化后的文件，用于服务器部署）
├── src/
│   ├── common/
│   │   └── （存放所有页面共用的模块）
│   ├── includes/
│   │   └── （存放页面模块，按页面名称分类）
│   ├── pages/
│   │   ├── about.pug
│   │   └── index.pug
│   ├── styles/
│   │   └── （存放样式文件）
│   ├── editorconfig
│   ├── eslintignore
│   ├── eslintrc.json
│   ├── gitattributes
│   ├── gitignore
│   ├── pug-lint.json
│   ├── stylelintrc.json
│   ├── LICENSE
│   ├── README.md
│   ├── gulpfile.js
│   ├── package-lock.json
│   └── package.json
└── gulp/
    └── tasks/
        └── （存放任务脚本）

目录结构说明

• build/：存放优化后的文件，用于服务器部署。
• src/：工作目录，存放所有源文件。
  • common/：存放所有页面共用的模块。
  • includes/：存放页面模块，按页面名称分类。
  • pages/：存放页面文件，如 about.pug 和 index.pug。
  • styles/：存放样式文件。
  • 其他文件：如 editorconfig、eslintignore、eslintrc.json 等，用于配置编辑器和代码检查工具。
• gulp/：存放 Gulp 任务脚本。

2. 项目启动文件介绍

项目的启动文件是 gulpfile.js，它位于项目根目录下。gulpfile.js 是 Gulp 的配置文件，定义了项目的构建任务。

gulpfile.js 内容概述

// 导入 Gulp 和其他插件
const gulp = require('gulp');
const pug = require('gulp-pug');
const pugLinter = require('gulp-pug-linter');
const htmlValidator = require('gulp-w3c-html-validator');
const bemValidator = require('gulp-html-bem-validator');

// 定义任务
function pug2html() {
  return gulp.src('src/pages/*.pug')
    .pipe(pugLinter())
    .pipe(pug())
    .pipe(htmlValidator())
    .pipe(bemValidator())
    .pipe(gulp.dest('build'));
}

// 导出任务
exports.start = gulp.series(pug2html);

启动步骤

1. 安装依赖：在项目根目录下运行 npm install。
2. 启动任务：在项目根目录下运行 gulp start，Gulp 将执行 pug2html 任务，生成 HTML 文件并输出到 build/ 目录。

3. 项目配置文件介绍

package.json

package.json 是 Node.js 项目的配置文件，定义了项目的元数据和依赖项。

{
  "name": "gulp-template",
  "version": "1.0.0",
  "description": "Gulp template project",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dDenysS",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-pug": "^4.0.1",
    "gulp-pug-linter": "^1.1.0",
    "gulp-w3c-html-validator": "^1.0.0",
    "gulp-html-bem-validator": "^1.0.0"
  }
}

配置文件说明

• name：项目名称。
• version：项目版本号。
• description：项目描述。
• main：项目入口文件。
• scripts：定义了项目的脚本命令，如 test。
• author：项目作者。
• license：项目许可证。
• devDependencies：开发依赖项，如 Gulp 和相关插件。

其他配置文件

• .editorconfig：配置编辑器的行为，如缩进风格、字符集等。
• .eslintignore：定义 ESLint 忽略的文件和目录。
• .eslintrc.json：ESLint 配置文件，定义代码检查规则。
• .gitattributes：配置 Git 属性，如文件换行符处理。
• .gitignore：定义 Git 忽略的文件和目录。
• pug-lint.json：Pug 代码检查工具的配置文件。
• stylelintrc.json：Stylelint 配置文件，定义样式检查规则。

通过以上配置文件，项目可以实现代码风格统一、自动化构建和代码质量检查等功能。