- 一堆前缀 -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 [email protected]: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 就比较方便了