简介
fis-postpackager-simple是由百度研发的一个前端构建打包工具，用于打包后的页面资源进行合并、上传到服务器等操作。
npm包 fis-postpackager-simple是该工具的插件，它提供了更多的功能，能够更加深入地优化打包后的资源。
安装
使用npm安装fis-postpackager-simple包：
npm install fis-postpackager-simple
使用
在fis-conf.js文件中配置：
-- -------------------- ---- -------
------------------
-------- -
------------- ----------
--
--------- -
------------- -
------- -
------------ ----- -- ----------
----------- ----- -- -------------
------- ------------------------- -- ---------
-
-
-
---以上配置会启用fis-postpackager-simple插件，同时设置了autoCombine、autoReflow和domain等参数。
参数说明
autoCombine
类型：Boolean
默认值：false
设为true时，工具会自动合并相关的静态资源，如将多个CSS文件合并为一个文件，将多个JS文件合并为一个文件等。
例如：
-- -------------------- ---- -------
-----------------
--------- -----
------
------
------------------------------------------
----- ---------------- ---------------------
----- ---------------- ----------------------
-------
------
------------------
---- ----------------
-----------------
------
------- --------------------------------
------- --------------------------
-------
-------当autoCombine设为true时，会将两个CSS文件、两个JS文件进行合并，生成以下文件：
-- -------------------- ---- -------
-----------------
--------- -----
------
------
------------------------------------------
----- ---------------- -----------------------------------
-------
------
------------------
---- ----------------
-----------------
------
------- -----------------------------------------
-------
-------autoReflow
类型：Boolean
默认值：false
设为true时，工具会自动格式化HTML、CSS、JS代码，省去手动调整缩进的繁琐步骤。
例如：
-- -------------------- ---- -------
-----------------
--------- -----
------
------
------------------------------------------
----- ---------------- ---------------------
----- ---------------- ----------------------
-------
------
------------------
---- ----------------
-----------------
------
------- --------------------------------
------- --------------------------
-------
-------当autoReflow设为true时，会将该文件的代码格式化，生成以下文件：
-- -------------------- ---- -------
-----------------
--------- -----
------
------
------------------------------------------
----- ---------------- ---------------------
----- ---------------- ----------------------
-------
------
------------------
---- ----------------
-----------------
------
------- --------------------------------
------- --------------------------
-------
-------domain
类型：String
默认值：无
设定页面中引用的静态资源的域名地址，可使该页面的静态资源进行CDN加速。
例如：
settings: {
postpackager: {
simple: {
domain: 'http://cdn.example.com'
}
}
}示例
使用fis-postpackager-simple合并静态资源
以下是一段简单的HTML代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------------------------------
----- ---------------- ---------------------
----- ---------------- ----------------------
-------
------
------------------
---- ----------------
-----------------
------
------- --------------------------------
------- --------------------------
-------
-------使用fis-postpackager-simple合并CSS和JS文件，则需要在fis-conf.js中配置：
-- -------------------- ---- -------
------------------
-------- -
------------- ----------
--
--------- -
------------- -
------- -
------------ -----
------- -------------------------
-
-
-
---最终生成的HTML代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------------------------------
----- ---------------- ---------------------------------------------------------
-------
------
------------------
---- ----------------
-----------------
------
------- ---------------------------------------------------------------
-------
-------使用fis-postpackager-simple进行代码格式化优化
以下是一段未格式化的HTML代码：
<!DOCTYPE html><html><head><title>fis-postpackager-simple使用示例</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/detail.css"></head><body><h1>这是一篇文章的标题</h1><div class="content"><p>文章内容......</p></div><script src="js/jquery.min.js"></script><script src="js/main.js"></script></body></html>
使用fis-postpackager-simple进行代码格式化优化，则需要在fis-conf.js中配置：
-- -------------------- ---- -------
------------------
-------- -
------------- ----------
--
--------- -
------------- -
------- -
----------- -----
-
-
-
---最终生成的HTML代码：
-- -------------------- ---- -------
--------- -----
------
------
------------------------------------------
----- ---------------- ---------------------
----- ---------------- ----------------------
-------
------
------------------
---- ----------------
-----------------
------
------- --------------------------------
------- --------------------------
-------
-------结论
fis-postpackager-simple是前端构建打包工具的插件之一，使用它可以轻松地实现静态资源的合并、上传等操作。当然，还可以通过配置autoCombine、autoReflow、domain等参数达到个性化的需求，使得工具具有更加强大的灵活性和实用性。
静态资源的管理在前端开发中占据着很重要的地位，使用fis-postpackager-simple可以极大地简化的开发人员的工作量，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67412