Compiler@NodeJS(三)- 自定义命令

_接上篇:Compiler@NodeJS(二)- 强大的管道_

本来早就应该写这篇文章的,只是忙的时候忙,闲的时候懒,导致拖了这么久。

不管内置多少命令,需求总是千变万化的,这时候内置命令就不够用了,需要使用者自己编写一些命令。现在来看看怎么做。more

一、内置命令

先来看看内置命令的文件结构是怎样的:

+--- compiler

+--- cmds

+--- copy

+--- concat

--- index.js

--- README.md

每个命令都是cmds下面的一个单独目录,如copy、concat等等。每个命令下面都必须有一个index.j......

Compiler@NodeJS(一) - Web项目编译脚本

转眼这一年又要到尾声了。想想这一年,貌似没干啥大事,却写了一堆杂七杂八的脚本,零零碎碎的。单个单个地用的时候是挺爽的,一旦跟已有项目结合起来的时候,由于之前的编译脚本是用python写的,没有灵活的插件机制,操作起来相当的不方便。就比如之前写的自动合图脚本(iSpriter),如果要在项目中加入,就得手动执行一次合图脚本,然后再执行python编译脚本。万一忘了合图,就会酿成发布事故。

因此,一直都在计划着用NodeJS实现一个编译脚本,可以方便的把以前写的一些脚本组合起来。于是抽了一些时间,整了这个编译脚本(compiler)。more

特性

其实世面上的编译脚本也有不少了......

【更新】Template-Picker - 模板代码抽取工具

感慨几句

最近开搞Android开发了,没怎么弄js。跳出这个圈,开始考虑是不是可以做点代码之外的事。编程语言一直在发展,新特性总会层出不穷。那么,语言之外呢?

拿Web前端开发来说,js之外,还是有很多东西要做的。比如说发布脚本,比如说提速等等。

好,进入正题。

话说之前写过一个把写在html里的模板代码,抽取到js里面的脚本,开始的时候用了一段时间,感觉还可以再优化下。后来做了个新项目,里面与多个html页面,也都包含有模板代码,也都要抽取。这时之前的脚本就有点力不从心了。

所以把抽取脚本升级了下,给了个名字叫 template-picker,添加了一下......

【更新】iSpriter - 智能合并CSS精灵图

号外号外,iSpriter更新啦!

什么?你不知道iSpriter是什么?那你太out啦,必须先看看这个文章了。简单的一句话介绍:基于NodeJs的开源CSS精灵图合并工具,不用改变原有的 css 编写方式,就能自动帮你解决 css sprite 的合并问题。目前源码托管在 github(https://github.com/iazrael/ispriter),欢迎各位同学来一起完善。

由于最初写的时候不怎么注意代码自量,写得比较搓。在应用在几个项目之后,修复了一些 bug,发现再加新功能比较困难。最近终于下决心重构了下,并在重构的基础上增加了一些新特性。

目前 iSp......

NodeJs智能合并CSS精灵图工具iSpriter

一、引子

根据雅虎的网站优化准则,合并页面用到的图片,可以减少加载时发起的http请求数目,可以加速页面加载。具体能提速多少,本人没测试过,也就不好说了。

话说这排手上的项目里用到的图片都怎么合并,并不是不想合并,而是一个个图片去拼实在是太累了啊。另外桂总做的autosprite又还没成型,未能支持旧有项目;自己做的AutoSprites也是一个烂摊子——java写脚本功能的代码真不是一般的痛苦啊;至于炜哥的GoPng在线合图工具,说实话,这类需要人工定位图片的工具,我着实不喜欢。还是那句话,我可是个程序员呐,这种机械化无趣的工作就该交给电脑来完成,不然电脑是拿来干嘛的?

二......

【加载提速】剥离模板代码加速Web页面加载

开篇

现在Web富应用越来越多,越来越多网站朝单页面发展,所有功能模块都在一个页面中创建。作为一个合格的前端,所负责的模块一定是逻辑跟UI分离的,通常的做法就是页面代码编写成模板,然后往模板填充数据并输出到页面上。关于前端模板的介绍和使用我就不说了,不了解的可以先看看这篇文章(http://www.css88.com/archives/4564),这里讨论下使用模板引擎引入的另外一个问题(也不是Bug啦~) -- 页面模板代码放哪?

页面模板代码放哪

呼~~总算到正题了(- -||)。说回来,页面模板的代码到底要放哪呢?

放在 js 文件中;

放在页面不可见的地方,比如......

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟