300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 自己动手 丰衣足食. 自己动手丰衣足食

自己动手 丰衣足食. 自己动手丰衣足食

时间:2022-02-22 23:25:48

相关推荐

自己动手 丰衣足食. 自己动手丰衣足食

php教程|php手册

诗句

php教程-php手册

自己动手,丰衣足食.,自己动手丰衣足食

原生贷超源码,ubuntu启动软件管理,怪物猎人爬虫头,php apache关系,无双seo方案lzw

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

aspcms手机网站源码,ubuntu不能切换su,java爬虫怎么获取,php (float),辽阳seo推广lzw

<!--用于PC上调式,不参与合并压缩-->

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

办公设备网站源码,怎么修复ubuntu系统,如何将tomcat删除,axie克制爬虫,php魔术变量用法,seo rsslzw

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

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

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

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

4. 执行批处理文件

5. 显示处理结果

即然有两种情况,我就用一个工厂模式来适配,方便以后扩展其它类型,目光要放长远一点。即然工厂都有了,那索性再来一个接口,约定都必需要实现“接收请求”和“输出结果”这两个接口。再想想处理js和css都可能会有相同的功能,让它们继承一个父类可以使代码复用,于是继承也先用上。目前的设计应当可以满足我的要求了,于是开始编写php代码.

<?phpheader("Content-type: text/html; charset=utf-8");/** * 根据index.html文件中引用的js,生成compressJs.bat * @author frog * @date -11-17 */interface ICompress { /*** 处理用户请求* @return [type] [description]*/ public function request(); /*** 处理输出结果* @return [type] [description]*/ public function render();}class BaseCompress { public $content; public $outPath; public $isAuto; public function __construct($isAuto=false){ $outPath = \_file; if(!is_dir($outPath)){ mkdir($outPath); } $this->outPath = $outPath; $this->isAuto = $isAuto; } /*** 运行批处理* @return [type] [description]*/ public function runBat($name){ }}/** * 压缩javascript文件 * 合并javascript文件 */class CompressJS extends BaseCompress implements ICompress { /*** 处理用户请求* @return [type] [description]*/ public function request(){ } /*** 处理输出结果* @return [type] [description]*/ public function render(){}}/** * 压缩样式文件 */class CompressCSS extends BaseCompress implements ICompress { public function request(){} /*** 处理输出结果* @return [type] [description]*/ public function render(){}}/** * 工厂类 */class Factory { public static function create($type,$isAuto){ $ob = null; switch ($type) { case js:$ob = new CompressJS($isAuto);break; case css:$ob = new CompressCSS($isAuto);break; default:# code...break; } return $ob; }}

然后是调用处理:

//处理ajax请求if(isset($_POST[submit])){ //是否自动执行批处理 $isAuto = $_POST[zip] === rue ? true : false; //处理类型 $type = $_POST[ ype]; $c = Factory::create($type,$isAuto);

//接口方法 $c->request(); $c->render();}else{ echo 请使用静态页访问本程序:点此进入;}

大致的骨架就出来了。具体的填码过程就比较简单了。稍微有点难度的就是执行批处理这个一方法.

是网上提供的方法,以后可能用的上,这里特意贴一下:

public function runBat($name){ if(!file_exists($name) || !$this->isAuto){ return; } //转入后台处理 @exec(pclose(popen("start /B ". escapeshellcmd($name), "r"))); }

在前面的index.html中,有一个name=”noBuild”这个是我人为添加的,这是因为我要过滤这种标识的js文件,这样以后要过滤别的文件,也只要添加这个标识就可以了,不用改php代码。由于是内部使用,没有做表单项来指定工程的路径,默认就是index.html所处的上级目录即为工程目录。这样设计简化了操作,提高了效率。

关于遍历特定的文件,我推荐glob函数,很简洁的方案:

$files = glob($path./*.css,GLOB_NOSORT);

下面是工程目录结构图:

再来一张运行效果图:

最后是处理结果图:

终于不用写grunt的配置和安装node这个家伙了,再也不担心更新的时候,从svn上拉下来一堆node的东西,是时候和它们说再见了:

好像忘了展示前端代码了:

/** * 选项卡类 * @param {string} id 选项卡的ID */function Tabs(id){ var node = document.querySelector(#+id); var selected = node.querySelector(.selected); this.selected = selected; this.node = node; this.bindEvent();}/** * 切换选项卡 * @param {object} event 事件 * @return {[type]} [description] */Tabs.prototype.change = function(event){ var element = event.target; if(element.tagName.toLowerCase()==li){ if(element.className==selected){ return; } }else{ while(element != this.node){ element = element.parentNode; if(element.tagName.toLowerCase()==li){break; } } if(element == this.node) return; } this.selected.removeAttribute(class); element.className = selected; this.selected = element; this.content();}Tabs.prototype.content = function(){ var form = document.form1; switch(this.getTabType()){case js: form.style.display = lock; form.children[0].innerHTML = 自动压缩JS; break;case css: form.style.display = lock; form.children[0].innerHTML = 自动压缩CSS; break;default: }}

会前端和后端,就是这么任性。轻轻一点,告别烦恼!造自己的工具,让别人去苦逼吧,So easy!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。