简介
amap-grunt-inline 是一款基于 Grunt 的自动化构建工具，它可以将高德地图 API 的 JavaScript 文件内联到 HTML 中，从而减小 HTTP 请求的数量，提高性能。该工具基于 npm 包构建，可以方便地引入到你的项目中。
安装
npm install amap-grunt-inline --save-dev
使用
配置 Grunt 任务
在 Gruntfile.js 文件中配置任务：
-- -------------------- ---- -------
-------------- - --------------- -
-- ----
------------------
---------------- -
-------- -
------- ------ -- -------- ------ ------ -----
---- ----- ---- ----- -- ------- ---
----------- ---------------- -- ---------- ---- --
--
--
---
-- ----
----------------------------------------
-- ----
----------------------------- ---------------------
--配置 HTML 文件
在需要处理的 HTML 文件中添加注释：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------- ---- ---------- --- ------- ---------------------- ------------------------------------------------------------- ---- -------- --- ------- ------ ---- --------------- ------- -------
build:amap 是自定义的注释，amap-grunt-inline 会根据注释的标识进行处理。
运行任务
在命令行中运行 grunt 命令，即可生成处理后的 HTML 文件：
grunt
参数说明
| 参数 | 说明 | 默认值 | 必填 |
|---|---|---|---|
| encode | 是否对源文件进行 base64 编码 | false | 否 |
| key | 高德地图开发者 Key | - | 是 |
| sourcePath | 待处理文件路径，支持 glob 方式 | - | 是 |
| destPath | 处理后的文件路径，支持 glob 方式 | - | 否 |
| baseDir | 待处理文件的基础目录，用于计算相对路径 | . | 否 |
示例代码
完整的示例代码可以在 amap-grunt-inline-demo 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73969