**正文**
前端开发中，构建工具的使用是提高效率、保证代码质量和自动化流程的关键部分。在众多工具中，`gulp` 是一款流行的基于任务的构建系统，它允许开发者定义和执行自定义的构建任务。而 `gulp-nunjucks-html` 是一个针对 `gulp` 的插件，专门用于处理 `Nunjucks` 模板并将其编译成 HTML 文件。本文将详细介绍这个开源库的功能、用法以及其在前端项目中的应用。
**一、Nunjucks模板引擎**
`Nunjucks` 是一个强大的模板引擎，它具有丰富的语法和功能，支持继承、包含、过滤器、宏等特性，使得编写复杂的HTML模板变得更加简洁和高效。与 `EJS`、`Handlebars` 等模板引擎类似，`Nunjucks` 允许开发者在HTML中嵌入动态代码，以实现数据驱动的页面生成。
**二、gulp-nunjucks-html 插件**
`gulp-nunjucks-html` 是 `gulp` 生态系统中的一个插件，它的主要作用是将 `Nunjucks` 模板文件转换为可直接在浏览器中运行的 HTML 文件。这个插件提供了以下核心功能：
1. **模板编译**：解析 `Nunjucks` 模板文件，并将其中的变量、逻辑等替换为实际值。
2. **数据注入**：允许开发者提供 JSON 数据，这些数据将在编译过程中被注入到模板中。
3. **文件扩展名支持**：可以设置自定义的模板文件扩展名，默认为 `.nunjucks`。
4. **模板路径配置**：可以设置模板目录和输出目录，方便管理和组织模板文件。
5. **自动刷新**：配合其他 `gulp` 插件（如 `gulp-watch`），可以在文件变更时自动重新编译模板，实现实时预览。
**三、使用步骤**
要在项目中使用 `gulp-nunjucks-html`，首先需要安装 `gulp` 和 `gulp-nunjucks-html`，通过 `npm` 进行安装：
```bash
npm install --save-dev gulp gulp-nunjucks-html
```
然后在 `gulpfile.js` 中编写任务：
```javascript
const gulp = require('gulp');
const nunjucksRender = require('gulp-nunjucks-render');
gulp.task('default', function () {
return gulp.src('src/templates/**/*.nunjucks') // 指定模板文件路径
.pipe(nunjucksRender({
path: ['src/templates'], // 设置模板目录
data: { // 提供数据对象
siteTitle: 'My Website'
}
}))
.pipe(gulp.dest('dist/html')); // 输出到指定目录
});
```
运行 `gulp` 命令，`gulp-nunjucks-html` 将自动处理模板文件，生成对应的 HTML 文件。
**四、应用场景**
`gulp-nunjucks-html` 主要适用于以下场景：
1. **静态站点生成**：生成静态 HTML 页面，便于部署到服务器。
2. **快速原型开发**：在开发过程中快速创建和迭代页面布局。
3. **动态数据渲染**：在本地环境预览由后端数据驱动的页面。
4. **持续集成**：在 CI/CD 流程中自动编译模板，确保生产环境的代码质量。
`gulp-nunjucks-html` 提供了一个便捷的途径，让前端开发者可以利用 `Nunjucks` 的强大功能，同时享受到 `gulp` 自动化带来的便利。通过这个插件，我们可以轻松地将模板语言转换为静态 HTML，简化前端开发流程，提升工作效率。在实际项目中，结合其他 `gulp` 插件，可以构建出更完整的前端构建体系。
前端开源库-gulp-nunjucks-html.zip （7个子文件） 
gulp-nunjucks-html-master 
.gitignore 17B
