npm 包 grunt-minify-polymer 使用教程
前言
对于前端开发者来说，开发一个高质量的项目需要掌握一些构建工具、自动化工具等开发辅助工具。本文介绍的是一个能够在 Polymer 项目中快速进行 js 和 css 压缩的 npm 包 grunt-minify-polymer 的使用教程。
简介
grunt-minify-polymer 是一个能够在 Polymer 项目中快速进行 js 和 css 压缩的 npm 包。它使用 UglifyJS2 和 clean-css 进行相应的压缩处理，并支持 Polymer v1.x。
安装
在使用 grunt-minify-polymer 之前，需要在项目中安装 grunt 和 grunt-minify-polymer 两个 npm 包。
npm install grunt --save-dev npm install grunt-minify-polymer --save-dev
配置
在项目的 Gruntfile.js 中配置任务：
-- -------------------- ---- -------
-------------- - -------- ------- -
------------------
-------------- -
-------- -
--- -
------- ----- -- --------- ----
----------------- ------ -- ---------- ---------------------- ------
--
---- -
-------------- --------------- -- --- -------- --------- ------ ----------------
-
--
----- -
------ --
------- -----
---- ------
---- --------------
----- -------
--
-
-
---
-------------------------------------------
----------------------------- -------------------
--其中，options 配置是可选的，可以根据具体需要进行设置。files 配置为相对路径（相对于 Gruntfile.js 所在的目录）。这里示例中将 app 下所有的 html 文件进行压缩要求，输出到 dist 目录下。
示例
一个简单的 Polymer 组件：
-- -------------------- ---- -------
---- ----------------------------------------- ---
----- ------------ ---------------------------------------------------
----------- ----------------
----------
-------
----- -
-------- ------
---------- -----
-
-- -
---------- -----
-
--------
---------- -----------
-----------
--------
---------
--- -------------
----------- -
----- -
----- -------
------ -------
-
-
---
---------
-------------将上述代码中的 my-element.html 文件进行压缩，输入到 dist/components/my-element/my-element.html 中：
grunt
压缩后的代码：
<link rel="import" href="../../bower_components/polymer/polymer.html"><dom-module id="my-element"><template><style>:host{display:block;font-size:16px}h1{font-size:20px}</style><h1>Hello, World!</h1></template><script>Polymer({is:"my-element",properties:{name:{type:String,value:"World"}}});</script></dom-module>结语
本文介绍了如何在 Polymer 项目中使用 grunt-minify-polymer 进行 js 和 css 压缩，从而提高项目的性能。希望读者能够掌握这个工具的使用方法，并在实际项目中运用起来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72808