<spanmicrosoft yahei><span><!</span><span>DOCTYPE html</span><span>></span> <span><</span><span>html</span><span>></span> <span><</span><span>head</span><span>></span> <span><</span><span>meta </span><span>charset</span><span>="utf-8"</span><span>></span> <span><</span><span>meta </span><span>http-equiv</span><span>="X-UA-Compatible"</span><span> content</span><span>="IE=edge,chrome=1"</span><span>></span> <span><</span><span>meta </span><span>name</span><span>="viewport"</span><span> content</span><span>="target-densitydpi=device-dpi, initial-scale=1, user-scalable=0, maximum-scale=1"</span><span>></span> <span><!--</span><span>隐藏浏览器的工具栏和菜单栏,对iso系统起用</span><span>--></span> <span><!--用于PC上调式,不参与合并压缩</span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/data/database.js"</span><span> name</span><span>="noBuild"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span>Iframe加载处理</span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/LoadMode.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/jQuery.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/underscore.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/snap.min.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/pixi.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/Xut.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/isMobile.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/aaronRequire.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/nextTick.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/Config.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Object.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Function.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/lang/Array.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/video.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 自定义事件,合集处理,iframe通讯 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/core/event/asEvented.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/core/message/pms.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span>插件</span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/cordova.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/readAssetsFilePlugin.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/initDatabase.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/web.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/video.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/openAppPlugin.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/tabletPlugin.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/statusbar.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/iap.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/AppStoreLink.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/downloadPlugin.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/xxteManager.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/unzipPlugin.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/readPlugin.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/plugin/deletePlugin.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 动画库 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/TweenMax.min.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/plugins/ThrowPropsPlugin.min.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/PptAnimation.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/CanvasAnimation.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/dragdrop/Draggable.min.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/dragdrop/dragdrop.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/iscroll.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/hammer.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/svgicons-config.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/SVGIcons/svgicons.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/animate/SpriteA.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/util/Utils.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/util/LocalStorage.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/util/ScriptLoad.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/util/ExecuteSql.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/util/PromptNotice.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/util/edge.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 配置文件,数据文件,结构文件 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/data/Store.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/data/StoreManager.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 数据初始化 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/Main.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/Initialize.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneLayout.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneFactory.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scenario/SceneController.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/LoadScene.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/Dispatcher.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 工具栏 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/toolbar/Navbar.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/toolbar/sToolbar.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/toolbar/fToolbar.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/toolbar/searchBar.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/toolbar/bookMark.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 多线程任务片 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/threadTask/Buffer.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskContents.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskComponents.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskBackground.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/threadTask/TaskContainer.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Parser.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Collection.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/pageBase/MultiEvent.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/pageBase/PageBase.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Page.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/pageBase/Master.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 页面管理模块 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/transform/Translation.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/OverrideApi.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/Abstract.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/Emitter.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/PageMgr.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/MasterMgr.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/Compiler.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/ViewModel.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/SwitchPage.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/controller/EventDrive.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span>热点管理</span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignAutoRun.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignTrigger.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignSuspend.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignOriginal.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scheduler/AssignRecovery.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scheduler/ProcessControl.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/scheduler/Binding.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 适配器,用于处理热点 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Content.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Widget.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Media.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-Action.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/directives/dir-ShowNote.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span>多媒体对象 </span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/component/media/Audio.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/component/media/Video.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/component/media/AudioManager.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/component/media/VideoManager.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span>文本热点</span><span>--></span> <span><</span><span>script </span><span>src</span><span>="lib/component/content/conFilter.js"</span><span>></</span><span>script</span><span>></span> <span><</span><span>script </span><span>src</span><span>="lib/component/content/conAlgorithm.js"</span><span>></</span><span>script</span><span>></span> <br></spanmicrosoft>
<?<span>php </span><span>header</span>("Content-type: text/html; charset=utf-8"<span>); </span><span>/*</span><span>* * 根据index.html文件中引用的js,生成compressJs.bat * @author frog <278500368@qq.com> * @date 2014-11-17 <span>*/</span> <span>interface</span><span> ICompress { </span><span>/*</span><span>* * 处理用户请求 * @return [type] [description] </span><span>*/</span> <span>public</span> <span>function</span><span> request(); </span><span>/*</span><span>* * 处理输出结果 * @return [type] [description] </span><span>*/</span> <span>public</span> <span>function</span><span> render(); } </span><span>class</span><span> BaseCompress { </span><span>public</span> <span>$content</span><span>; </span><span>public</span> <span>$outPath</span><span>; </span><span>public</span> <span>$isAuto</span><span>; </span><span>public</span> <span>function</span> __construct(<span>$isAuto</span>=<span>false</span><span>){ </span><span>$outPath</span> = '_file'<span>; </span><span>if</span>(!<span>is_dir</span>(<span>$outPath</span><span>)){ </span><span>mkdir</span>(<span>$outPath</span><span>); } </span><span>$this</span>->outPath = <span>$outPath</span><span>; </span><span>$this</span>->isAuto = <span>$isAuto</span><span>; } </span><span>/*</span><span>* * 运行批处理 * @return [type] [description] </span><span>*/</span> <span>public</span> <span>function</span> runBat(<span>$name</span><span>){ } } </span><span>/*</span><span>* * 压缩javascript文件 * 合并javascript文件 </span><span>*/</span> <span>class</span> CompressJS <span>extends</span> BaseCompress <span>implements</span><span> ICompress { </span><span>/*</span><span>* * 处理用户请求 * @return [type] [description] </span><span>*/</span> <span>public</span> <span>function</span><span> request(){ } </span><span>/*</span><span>* * 处理输出结果 * @return [type] [description] </span><span>*/</span> <span>public</span> <span>function</span><span> render(){} } </span><span>/*</span><span>* * 压缩样式文件 </span><span>*/</span> <span>class</span> CompressCSS <span>extends</span> BaseCompress <span>implements</span><span> ICompress { </span><span>public</span> <span>function</span><span> request(){ } </span><span>/*</span><span>* * 处理输出结果 * @return [type] [description] </span><span>*/</span> <span>public</span> <span>function</span><span> render(){} } </span><span>/*</span><span>* * 工厂类 </span><span>*/</span> <span>class</span><span> Factory { </span><span>public</span> <span>static</span> <span>function</span> create(<span>$type</span>,<span>$isAuto</span><span>){ </span><span>$ob</span> = <span>null</span><span>; </span><span>switch</span> (<span>$type</span><span>) { </span><span>case</span> 'js': <span>$ob</span> = <span>new</span> CompressJS(<span>$isAuto</span><span>); </span><span>break</span><span>; </span><span>case</span> 'css': <span>$ob</span> = <span>new</span> CompressCSS(<span>$isAuto</span><span>); </span><span>break</span><span>; </span><span>default</span>: <span>#</span><span> code...</span> <span>break</span><span>; } </span><span>return</span> <span>$ob</span><span>; } }</span>
Then the call processing:
<span>//</span><span>处理ajax请求</span> <span>if</span>(<span>isset</span>(<span>$_POST</span>['submit'<span>])){ </span><span>//</span><span>是否自动执行批处理</span> <span>$isAuto</span> = <span>$_POST</span>['zip'] === 'true' ? <span>true</span> : <span>false</span><span>; </span><span>//</span><span>处理类型</span> <span>$type</span> = <span>$_POST</span>['type'<span>]; </span><span>$c</span> = Factory::create(<span>$type</span>,<span>$isAuto</span><span>);<br> //接口方法 </span><span>$c</span>-><span>request(); </span><span>$c</span>-><span>render(); }</span><span>else</span><span>{ </span><span>echo</span> '请使用静态页访问本程序:<a href="index.html">点此进入</a>'<span>; }</span>
The rough skeleton comes out. The specific coding process is relatively simple. The slightly more difficult method is to perform batch processing.
This is a method provided online, you may need it in the future, so I post it here:
<span>public</span> <span>function</span> runBat(<span>$name</span><span>){ </span><span>if</span>(!<span>file_exists</span>(<span>$name</span>) || !<span>$this</span>-><span>isAuto){ </span><span>return</span><span>; } </span><span>//</span><span>转入后台处理</span> @<span>exec</span>(<span>pclose</span>(<span>popen</span>("start /B ". <span>escapeshellcmd</span>(<span>$name</span>), "r"<span>))); }</span>
In the previous index.html, there is a name="noBuild" that I added artificially. This is because I want to filter js files with this logo. In this way, if I want to filter other files in the future, I only need to add this logo. That’s it, no need to change the php code. Since it is for internal use, there is no form item to specify the path of the project. By default, the upper-level directory where index.html is located is the project directory. This design simplifies operation and improves efficiency.
Regarding traversing specific files, I recommend the glob function, a very simple solution:
<span>$files</span> = <span>glob</span>(<span>$path</span>.'/*.css',GLOB_NOSORT);
The following is the project directory structure diagram:
Another operation rendering:
The last is the processing result picture:
Finally, I no longer have to write grunt configuration and install node. I no longer have to worry about pulling down a bunch of node stuff from svn when updating. It’s time to say goodbye to them:
It seems I forgot to show the front-end code:
<span>/*</span><span>* * 选项卡类 * @param {string} id 选项卡的ID </span><span>*/</span> <span>function</span><span> Tabs(id){ </span><span>var</span> node = document.querySelector('#'+<span>id); </span><span>var</span> selected = node.querySelector('.selected'<span>); </span><span>this</span>.selected =<span> selected; </span><span>this</span>.node =<span> node; </span><span>this</span><span>.bindEvent(); } </span><span>/*</span><span>* * 切换选项卡 * @param {object} event 事件 * @return {[type]} [description] </span><span>*/</span><span> Tabs.prototype.change </span>= <span>function</span><span>(event){ </span><span>var</span> element =<span> event.target; </span><span>if</span>(element.tagName.toLowerCase()=='li'<span>){ </span><span>if</span>(element.className=='selected'<span>){ </span><span>return</span><span>; } }</span><span>else</span><span>{ </span><span>while</span>(element != <span>this</span><span>.node){ element </span>=<span> element.parentNode; </span><span>if</span>(element.tagName.toLowerCase()=='li'<span>){ </span><span>break</span><span>; } } </span><span>if</span>(element == <span>this</span>.node) <span>return</span><span>; } </span><span>this</span>.selected.removeAttribute('class'<span>); element.className </span>= 'selected'<span>; </span><span>this</span>.selected =<span> element; </span><span>this</span><span>.content(); } Tabs.prototype.content </span>= <span>function</span><span>(){ </span><span>var</span> form =<span> document.form1; </span><span>switch</span>(<span>this</span><span>.getTabType()){ </span><span>case</span> 'js'<span>: form.style.display </span>= 'block'<span>; form.children[</span>0].innerHTML = '自动压缩JS'<span>; </span><span>break</span><span>; </span><span>case</span> 'css'<span>: form.style.display </span>= 'block'<span>; form.children[</span>0].innerHTML = '自动压缩CSS'<span>; </span><span>break</span><span>; </span><span>default</span><span>: } }</span>
I know both front-end and back-end, so I am so willful. Just one click and say goodbye to worries! Make your own tools and let others do the hard work, so easy!
The above is an introduction to how to do it yourself and have enough food and clothing. It includes all aspects of the content. I hope it will be helpful to friends who are interested in PHP tutorials.