简介
gulp-cirru-html 是一个基于 gulp 的前端构建工具，主要用于将 Cirru 语言转换为 HTML 页面。Cirru 语言是一种简单、优美的语言，使用缩进代替大括号的语法，能够方便地实现嵌套的 HTML 标签。gulp-cirru-html 包含丰富的配置选项，并提供了多种自定义插件来满足各种构建需求。
安装
使用 npm 进行安装：
npm install gulp-cirru-html --save-dev
使用
基本使用
在 gulpfile.js 中引入 gulp 和 gulp-cirru-html，编写任务：
const gulp = require('gulp');
const cirruhtml = require('gulp-cirru-html');
gulp.task('default', () =>
gulp.src('src/*.cirru')
.pipe(cirruhtml())
.pipe(gulp.dest('dist'))
);上述代码读取 src 目录下的所有 .cirru 文件，将其转换为 HTML 页面，并输出到 dist 目录下。
配置选项
gulp-cirru-html 提供了多种配置选项，可自定义转换过程中的行为。以下是部分常用选项的说明：
doctype：指定 HTML 文档类型，默认为 HTML5。indent：指定缩进符号，默认为四个空格。components：指定 Cirru 语言中支持的组件列表，默认为['div', 'p', 'img', 'a', 'ul', 'li', 'table', 'tr', 'td', 'th']。
可以通过传递一个对象作为参数来设置配置选项：
-- -------------------- ---- -------
-------------------- -- --
-----------------------
-----------------
-------- ------ --- --------------
------- -----
----------- ------- ---- ------ ----
---
------------------------
--自定义插件
gulp-cirru-html 还提供了多种自定义插件，用于扩展转换过程中的功能。以下是常用插件的说明：
cirruhtml-include：允许在 Cirru 语言中使用include指令引用其他文件中的代码。cirruhtml-css：允许在 Cirru 语言中使用css指令引用 CSS 文件，并将其合并为一个文件。cirruhtml-js：允许在 Cirru 语言中使用js指令引用 JavaScript 文件，并将其合并为一个文件。
可以使用以下方法启用自定义插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------- - ---------------------------
----- ---------------- - -----------------------------
----- ------------ - -------------------------
----- ----------- - ------------------------
-------------------- -- --
-----------------------
-----------------
-------- -
-------------------
---------------
-------------
-
---
------------------------
--示例代码
以下是一个基于 gulp-cirru-html 的示例项目，用于将 Cirru 语言转换为 HTML 页面，并包含自定义插件的使用：
https://github.com/gulp-cirru/gulp-cirruhtml-starter
总结
gulp-cirru-html 是一款强大的前端构建工具，能够方便、灵活地将 Cirru 语言转换为 HTML 页面，并提供了多种自定义插件满足各种构建需求。上述内容包含了基本使用、配置选项、自定义插件以及示例代码。学习和掌握 gulp-cirru-html 的使用将对前端开发工作具有指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75058