在前端开发中，Polymer 是一个非常流行的 Web 组件化框架。但是，我们如何进行打包和优化 Polymer 应用程序？这就需要用到一个工具：grunt-polymer-wp。
grunt-polymer-wp 是一个 Grunt 任务，用于将 Polymer 应用程序打包成一个可部署的小型程序。
在本文中，我们将介绍如何使用 npm 包 grunt-polymer-wp，以便更高效地进行 Polymer 开发。
安装 grunt-polymer-wp
在开始使用 grunt-polymer-wp 之前，我们需要先安装它。使用以下命令：
--- ------- ----------------
配置 Gruntfile.js
要使用 grunt-polymer-wp，我们需要在 Gruntfile.js 中添加以下内容：
-------------- - --------------- -
------------------
---------- -
-------- -
-- --
--
------------ -
-- -----
--
--
---
---------------------------------------
-- ----
----------------------------- ---------------
--在上面的代码中，我们定义了一个名为 polymerwp 的任务，并添加了必要的选项和目标。
Grunt任务选项
在 polymerwp 任务中，我们可以定义一些选项来指定应用程序运行的方式。以下是一些常用选项：
debug: true/false: 当设置为 true 时， grunt-polymer-wp 打包的文件会包含源映射(debug)信息，也就是可以追踪到原始 JS 文件。建议在开发阶段启用此选项。sourcemaps: true/false: 当设置为 true 时， grunt-polymer-wp 会生成源映射文件，以帮助调试代码。建议在开发阶段启用此选项。appcache: true/false: 当设置为 true 时，grunt-polymer-wp 会生成一个基于 HTML5 的应用程序缓存文件，来提高应用程序的离线访问性能。minify: true/false: 当设置为 true 时，grunt-polymer-wp 会对生成的代码进行压缩，以缩小文件大小。建议在生产环境使用此选项。
配置目标
在 Polymerwp 任务中，我们可以定义目标路径、源文件路径以及需要忽略的文件。例如：
---------- -
-------- -
------ -----
----------- -----
--------- -----
------- -----
--
------------ -
----- -----------------
---- -----------------------------
------- --------------------------
--
--在上面的代码中，我们定义了一个名为 your_target 的目标，它将从 path/to/polymer/app.html 文件中读取源代码，并将打包后的代码输出到 path/to/deploy 目录。
ignore 的值将包含一个或多个忽略的文件或目录，以逗号分隔。在上例中，我们忽略 bower_components 目录。
示例代码
-------------- - --------------- -
------------------
---------- -
-------- -
------ -----
----------- -----
--------- -----
------- -----
--
---- -
----- -----------------
---- -----------------------------
------- --------------------------
--
----- -
-------- -
------- ----
--
----- -----------------
---- -----------------------------
------- --------------------------
-
-
---
---------------------------------------
-- ----
----------------------------- -------------------
-- ----
-------------------------- --------------------
--总结
grunt-polymer-wp 是一个非常有用的工具，可以将 Polymer 应用程序打包成一个可部署的小型程序，从而提高开发效率。本文介绍了如何安装和配置 grunt-polymer-wp，以及如何使用 Gruntfile.js 添加目标。
在使用 grunt-polymer-wp 进行开发时，建议使用 debug，sourcemaps 和 appcache 选项进行开发，使用 minify 选项进行部署。在 Gruntfile.js 中，我们定义了两个任务： dev 和 prod。 dev 任务用于开发阶段，而 prod 任务用于生产阶段。
在实际项目开发中，我们可以根据实际需求配置任务选项和目标，来使用 grunt-polymer-wp 更高效地开发 Polymer 应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600556da81e8991b448d3b40