·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> php网站开发 >> 自己动手打造代码压缩合并工具

【如有意向点此提交需求】关于我们

自己动手打造代码压缩合并工具

作者：佚名      php网站开发编辑：admin      更新时间：2022-07-23
自己动手打造代码压缩合并工具

时下grunt非常的火啊，用着虽然很爽，但是它的配置确实很烦。如果之前没有用过，想要一下子熟练驾驭它，有一定的学习成本，而且还要装node这个大家伙，项目之初我们选择了compiler.jar这个轻量的工具进行打包。我一直在寻思着，如何编写一键打包工具。之前呢是手工的拼接好有的js文件，做成符合compiler.jar打包文件所要求的批处理文件，然后运行这个批处理，生成我们需要的js和CSS文件。随着js文件数量的增长，纯手工拼接这些文件的地址就变得非常考验人的耐心了，而且还容易漏掉或重复某些文件，于是“一键打包工具”的编写就变得刻不容缓了。下面是一个真实的index.html文件的一部分：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1, user-scalable=0, maximum-scale=1">     <!--隐藏浏览器的工具栏和菜单栏,对iso系统起用-->    <!--用于PC上调式，不参与合并压缩-->    <script src="lib/data/database.js" name="noBuild"></script>    <!--Iframe加载处理-->    <script src="lib/LoadMode.js"></script>    <script src="lib/core/jQuery.js"></script>    <script src="lib/core/underscore.js"></script>    <script src="lib/animate/SVGIcons/snap.min.js"></script>    <script src="lib/animate/pixi.js"></script>    <script src="lib/core/Xut.js"></script>    <script src="lib/core/isMobile.js"></script>    <script src="lib/core/aaronRequire.js"></script>    <script src="lib/core/nextTick.js"></script>    <script src="lib/Config.js"></script>    <script src="lib/core/lang/Object.js"></script>    <script src="lib/core/lang/Function.js"></script>    <script src="lib/core/lang/Array.js"></script>    <script src="lib/core/video.js"></script>    <!-- 自定义事件，合集处理，iframe通讯 -->    <script src="lib/core/event/asEvented.js"></script>    <script src="lib/core/message/pms.js"></script>    <!--插件-->    <script src="lib/plugin/cordova.js"></script>    <script src="lib/plugin/readAssetsFilePlugin.js"></script>    <script src="lib/plugin/initDatabase.js"></script>    <script src="lib/plugin/web.js"></script>    <script src="lib/plugin/video.js"></script>    <script src="lib/plugin/openAppPlugin.js"></script>    <script src="lib/plugin/tabletPlugin.js"></script>    <script src="lib/plugin/statusbar.js"></script>    <script src="lib/plugin/iap.js"></script>    <script src="lib/plugin/AppStoreLink.js"></script>    <script src="lib/plugin/downloadPlugin.js"></script>    <script src="lib/plugin/xxteManager.js"></script>    <script src="lib/plugin/unzipPlugin.js"></script>    <script src="lib/plugin/readPlugin.js"></script>    <script src="lib/plugin/deletePlugin.js"></script>    <!-- 动画库 -->    <script src="lib/animate/TweenMax.min.js"></script>    <script src="lib/animate/plugins/ThrowPRopsPlugin.min.js"></script>    <script src="lib/animate/PPTAnimation.js"></script>    <script src="lib/animate/CanvasAnimation.js"></script>    <script src="lib/animate/dragdrop/Draggable.min.js"></script>    <script src="lib/animate/dragdrop/dragdrop.js"></script>    <script src="lib/animate/iscroll.js"></script>    <script src="lib/animate/hammer.js"></script>    <script src="lib/animate/SVGIcons/svgicons-config.js"></script>    <script src="lib/animate/SVGIcons/svgicons.js"></script>    <script src="lib/animate/SpriteA.js"></script>    <script src="lib/util/Utils.js"></script>    <script src="lib/util/LocalStorage.js"></script>    <script src="lib/util/ScriptLoad.js"></script>    <script src="lib/util/ExecuteSql.js"></script>    <script src="lib/util/PromptNotice.js"></script>    <script src="lib/util/edge.js"></script>    <!-- 配置文件，数据文件，结构文件 -->    <script src="lib/data/Store.js"></script>    <script src="lib/data/StoreManager.js"></script>    <!-- 数据初始化 -->    <script src="lib/Main.js"></script>    <script src="lib/Initialize.js"></script>    <script src="lib/scenario/SceneLayout.js"></script>    <script src="lib/scenario/SceneFactory.js"></script>    <script src="lib/scenario/SceneController.js"></script>    <script src="lib/LoadScene.js"></script>    <script src="lib/Dispatcher.js"></script>    <!-- 工具栏 -->    <script src="lib/toolbar/Navbar.js"></script>    <script src="lib/toolbar/sToolbar.js"></script>    <script src="lib/toolbar/fToolbar.js"></script>    <script src="lib/toolbar/searchBar.js"></script>    <script src="lib/toolbar/bookMark.js"></script>    <!-- 多线程任务片 -->    <script src="lib/threadTask/Buffer.js"></script>    <script src="lib/threadTask/TaskContents.js"></script>    <script src="lib/threadTask/TaskComponents.js"></script>    <script src="lib/threadTask/TaskBackground.js"></script>    <script src="lib/threadTask/TaskContainer.js"></script>    <script src="lib/pageBase/Parser.js"></script>    <script src="lib/pageBase/Collection.js"></script>    <script src="lib/pageBase/MultiEvent.js"></script>    <script src="lib/pageBase/PageBase.js"></script>    <script src="lib/pageBase/Page.js"></script>    <script src="lib/pageBase/Master.js"></script>    <!-- 页面管理模块 -->    <script src="lib/controller/transform/Translation.js"></script>    <script src="lib/controller/OverrideApi.js"></script>    <script src="lib/controller/Abstract.js"></script>    <script src="lib/controller/Emitter.js"></script>    <script src="lib/controller/PageMgr.js"></script>    <script src="lib/controller/MasterMgr.js"></script>    <script src="lib/controller/Compiler.js"></script>    <script src="lib/controller/ViewModel.js"></script>    <script src="lib/controller/SwitchPage.js"></script>    <script src="lib/controller/EventDrive.js"></script>    <!--热点管理-->    <script src="lib/scheduler/AssignAutoRun.js"></script>    <script src="lib/scheduler/AssignTrigger.js"></script>    <script src="lib/scheduler/AssignSuspend.js"></script>    <script src="lib/scheduler/AssignOriginal.js"></script>    <script src="lib/scheduler/AssignRecovery.js"></script>    <script src="lib/scheduler/ProcessControl.js"></script>    <script src="lib/scheduler/Binding.js"></script>    <!-- 适配器,用于处理热点 -->    <script src="lib/directives/dir-Content.js"></script>    <script src="lib/directives/dir-Widget.js"></script>    <script src="lib/directives/dir-Media.js"></script>    <script src="lib/directives/dir-Action.js"></script>    <script src="lib/directives/dir-ShowNote.js"></script>     <!--多媒体对象 -->    <script src="lib/component/media/Audio.js"></script>    <script src="lib/component/media/Video.js"></script>    <script src="lib/component/media/AudioManager.js"></script>    <script src="lib/component/media/VideoManager.js"></script>    <!--文本热点-->    <script src="lib/component/content/conFilter.js"></script>    <script src="lib/component/content/conAlgorithm.js"></script>

后面还有很长，bug,活人不能被尿憋死，办法总比问题多。我是会一点php的，php在处理文件方面是很拿手的，是时候让它发挥点作用了。于是我想到了用php去自动提出index里边的js和css，然后按指定的格式生成批处理文件，在后台用静默方式运行这个批处理，最后把结果返回给显示器。这样我就可以坐享其成了。想想都有点小激动哟，于是简单的写了一个界面.

接下来就是实现功能了，先不着急编写代码，分析下需求：

1. 遍历index.html文件，提取js文件或css文件.

2. 对这文件进行过虑，因为有些是注释掉的，有些是调式用的。

3. 生成对应的批处理文件

4. 执行批处理文件

5. 显示处理结果

即然有两种情况，我就用一个工厂模式来适配，方便以后扩