前言
在前端开发中，我们经常需要对 HTML 和 CSS 进行处理，比如压缩、合并、自动添加前缀等等一些列操作。手动完成这些操作显然很繁琐，因此，我们常常使用 gulp 这样的构建工具来自动化这些操作。而在使用 gulp 过程中，我们也经常使用模板引擎来简化 HTML 的编写过程。今天，我们要介绍的是一款名为 gulp-art 的 npm 包，在使用 gulp 过程中，通过 gulp-art，我们可以方便地使用 art-template 这样的模板引擎来编写我们的 HTML。
gulp-art 的安装与使用
- 在你的项目根目录下执行以下命令进行安装：
npm install gulp-art --save-dev
- 在 gulpfile.js 中引入 gulp-art：
const gulp = require('gulp')
const art = require('gulp-art')
gulp.task('build', () => {
return gulp.src('src/*.art')
.pipe(art())
.pipe(gulp.dest('dist'))
})- 编写 art-template 模板，保存为 .art 文件，放在 src 文件夹下。
比如我们有一个模板文件叫做 index.art：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- ----- ---------- ----- ---------------- ----------------- -- -- ------- - -- ------- ------------------------------ -- - ---- - -- ------- ---------------------------------- -- - -- ------- ------ ------- ----- ------- ------ ------- ------ ------- ---------------------- ------- -------
- 运行 gulp 命令进行编译。
gulp build
gulp-art 的参数配置
在使用 gulp-art 过程中，我们还可以通过传入参数来对其进行配置。
设置 art-template 标识符
在默认情况下，art-template 的标识符是 <% 和 %>。但是，在某些场景下，这个标识符可能会和其他代码冲突，因此，我们可以通过修改 gulp-art 的参数来修改这个标识符。
-- -------------------- ---- -------
------------------ -- -- -
------ ---------------------
-----------
--- --------- ------- ---
--- ------------- ------ ---
-- -----
----- -----
-------- -------
---
------------------------
--设置 art-template 语法高亮
在使用 gulp-art 进行模板编译的时候，如果我们使用的是一些不支持 art-template 语法的编辑器，那么我们就很难区分出模板语法和 HTML 语法。此时，我们可以通过设置 gulp-art 的参数来为模板语法添加高亮样式。
-- -------------------- ---- -------
------------------ -- -- -
------ ---------------------
-----------
--- --------- ------- ---
--- ------------- ------ ---
-- ------
--------- ----
---
------------------------
--禁止 art-template 渲染空对象
在 art-template 渲染模板时，如果模板中使用到了一个不存在的变量，那么默认情况下，art-template 会将其渲染成一个空字符串。而在某些场景下，我们希望 art-template 不对这些不存在的变量进行渲染。此时，我们可以通过设置 gulp-art 的参数来禁止 art-template 渲染空对象。
-- -------------------- ---- -------
------------------ -- -- -
------ ---------------------
-----------
--- --------- ------- ---
--- ------------- ------ ---
--- -- ------- ---
------ -----
---
------------------------
--总结
通过本文的介绍，我们可以看到，gulp-art 这个 npm 包在使用 gulp 过程中，能够很方便地集成 art-template 模板引擎，为我们带来了很大的便利。希望通过本文的学习，读者已经对 gulp-art 的使用方法和参数配置有了更深的了解，并能够在实际开发中熟练地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb781e8991b448dc68f