- 一堆前缀 -web-kit -moz -o -khtml -ms 很烦,用less吧
- 可是......每次写完less都要重新编译,也很烦,是不是
- 那么,用Mr Ness吧
-
step1 如果cdn地址为 http://example.cdn.com/app/css/main.css 在c:/Windows/System32/drivers/etc/host添加一行
127.0.0.1 example.cdn.com
-
step2 当前路径比如在F:/site/
git clone git@github.com:WeweTom/nesir.git
-
step3 新建一个与你的cdn路径相对应的文件夹app,现在你的目录结构大概是这样的
├── app │ ├── main.css │ └── main.less ├── config.js ├── less │ └── lib.less ├── lib │ ├── node.exe │ └── node_modules ├── proxy.js ├── README.md └── run.cmd
-
step4 进入命令行执行下面命令 (运行前确认你的80端口没有被占用)
run.cmd
现在所有线上的example.cdn.com的资源都代理到本地了
稍大一点的网站都是用独立域名的cdn来放静态资源文件的
<html>
<head>
<link href="http://example.cdn.com/app/css/main.css"/>
</head>
<body>
some more snippet
</body>
</html>
前端在做demo的时候需要模拟cdn环境,也就是说资源路径也要是cdn资源路径,我们可以通过配置host来指向本机,nesir本身即是一个代理
当你访问 http://example.cdn.com/app/css/main.css nesir会检查 http://example.cdn.com/app/css/main.less 存在否,如果存在,则返回main.less编译后的结果
这样在开发时,就能边写less,边查看demo效果啦
当demo开发完毕后,最终上线的代码还是必须为css,这时候就需要将main.less的结果编译为main.css,通过在浏览器里输入
http://example.cdn.com/app/css/main.css?_build_less_
nesir会就会将main.less编译后的结果存成main.css
你就可以用less函数了,所有的less库文件可以放在less目录下,比如lib.less中定义了一些函数,将一些重复琐碎的工作交给less函数来完成吧 比如lib.less定义了一个这样的函数
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
在app/main.less中
@import "less/lib";
.box{
.border-radius(5px);
}
在浏览器中输入 http://example.cdn.com/app/main.css ,你将看到
.box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
cssGaga使用的文件后缀名为.source.css 如果你希望less编译后的css文件还要被cssGaga处理,那么配置config.js lessBuildExtension:'.source.css',这样编译main.less生成的文件就为main.source.less,再通过cssGaga处理,最终生成main.css。
强烈推荐cssGaga,自动拼图的功能太赞了,可惜依赖.net环境,不能再linux上使用
pubServer:'www.eg.com' //nesir在本机找不到资源的时候会到线上去取
有很多人都是Apache+PHP开发demo的,这样可能80端口都是默认被占用的,而这个代理工具有事需要80端口的,因为一般线上的cdn都是80端口,这个代理要完全模拟线上的资源路径嘛,所以呢,最好将Apache的端口改下,比如8080,再改下host 127.0.0.1 dev 这样开发demo时 http://dev:8080/demo/index.php 就比较方便了