背景
对于前端开发工程师来说，我们经常需要将 HTML、CSS、JS 等静态资源打包、压缩，并将其引入到页面中。Gulp 是一个非常流行的工具，可以帮助我们完成这些任务。而在 Gulp 中，有一个非常重要的插件 —— gulp-crisper，它可以将你的HTML打包成一个js，方便我们进行一些工具的操作，比如 webpack打包。
gulp-crisper 简介
gulp-crisper 是一个gulp插件模块，用于将HTML文件输出为多个文件（一份 JS 文件和一份 HTML 文件），并且自动将 JS 文件中引用的 CSS 和图片等资源转换成 base64 编码。
步骤
- 安装 gulp 和 gulp-crisper
npm install gulp gulp-crisper --save-dev
- 创建一个 gulp 任务
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------------------------
-------------------- -----------
------ ------------------------
---------------
----------- ------------
------------- -----
---
--------------------------
---在上面的代码中，我们首先通过 require 导入了 gulp 和 gulp-crisper。
然后，我们创建了一个名称为 crisper 的 gulp 任务，它将会处理所有 src 目录下的 HTML 文件，并将处理后的文件保存到 dist 目录中。
在 crisper 任务中，我们用 gulp.src() 方法获取所有需要处理的 HTML 文件，然后通过 crisper() 方法将这些文件输出为多个文件（一份 JS 文件和一份 HTML 文件）。
在 crisper() 方法里，我们可以配置一些参数，比如 jsFileName、scriptInHead 等。
最后，我们使用 gulp.dest() 方法将处理后的文件保存到 dist 目录中。
- 运行 gulp 任务
在终端中运行以下命令：
gulp crisper
执行完成后，你会在 dist 目录中看到生成的 JS 和 HTML 文件。
参数说明
jsFileName
- 类型：String
- 默认值：bundle.js
指定输出的 JS 文件名，如不指定则默认为 "bundle.js"。
scriptInHead
- 类型：Boolean
- 默认值：false
指定 JS 文件是否插入至 HTML 文件的前面，默认插入至 HTML 文件的后面。
示例
index.html:
-- -------------------- ---- -------
--------- -----
------
------
------------------- ------------
----- ---------------- -----------------------
-------
------
---- ---------------
------- ----------------------------
-------
-------gulpfile.js:
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - ------------------------
-------------------- -----------
------ ------------------------
---------------
----------- ------------
------------- -----
---
--------------------------
---
-------------------- -------------运行 gulp 命令后，会在 dist 目录下生成以下文件：
bundle.html:
-- -------------------- ---- -------
--------- -----
------
------
------------------- ------------
-------
------
---- ---------------
------- ---------------------------
-------
-------bundle.js:
(function (app) {
})(window.app || (window.app = {}));在这个示例中，我们将 index.html 文件通过 gulp-crisper 转换为了 bundle.html 和 bundle.js 两个文件。其中，bundle.html 中引用了 Bundle.js 文件，而 Bundle.js 文件使用自调用函数（IIFE）来包含了原本的 HTML 代码。同时，Bundle.js 文件中的 CSS 和图片也已经被转换成了 base64 编码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71655