fdserver
v0.9.0
Published
a server for web developer
Downloads
9
Readme
fd-server
注:1688 内部同学请使用直接集成到 Neat 中的fdserver,直接使用
neat server
启动服务。要给fdserver贡献代码请移步这里。
fd-server是一个使用node js开发的服务器
开发工程师可以使用它来代替apache搭建更轻量级的前端开发环境
它是基于connect模块开发的,所有的组件都以中间件的方式进行开发,因此很容易进行扩展。
它不仅仅是一个服务器,我们会在此基础上扩展很多工具和插件,从而让我们的开发变得更方便快捷。
你也可以在上面随意写写nodejs代码来扩展一些有意思的功能,整天开发客户端代码也够无聊的 (^_^)
使用方法
在使用之前需要你的机子安装node环境,然后进行以下步骤
- git clone https://github.com/fangdeng/fdserver.git
如果没有git可以去 http://42.121.109.6:3000/ 下载
cd fdserver
npm install --registry http://registry.cnpmjs.org # 安装依赖库
cp config.js.sample config.js
参考配置说明修改config.js
sudo node bin/fdserver # linux 等环境下可以使用sudo bin/fdserver直接运行
[注]
- 默认是运行在80端口上,所以需要管理员权限
- win下启动有少许差异,请自行调整
- config.js.sample是配置示例文件,需要重命名为 config.js修改成适合您的情况才能运行
- 后续会提供在线配置界面
配置和说明
通过配置config.js来使用服务器
config.js是一个普通的js文件,因此你可以在里面书写任意的js代码
修改config.js后,服务器将自动重新启动
通用
logger
日志配置,可以参考 Logger 配置
默认为空,即不输出日志
port
端口号,默认为80
host
可以独立配置多个host
{
// 全局配置
...
hosts: {
'style.c.aliimg.com': {
root: '/Users/bencode/webroot/styles'
},
'assets.1688.com': {
root: '/Users/bencode/webroot/static_site'
}
...
}
}
如上例配置了两个host, 每个host的root配置成资源目录
[注] 路径需要以 / 分隔
rewrite
通过rewrite可以配置一些重写规则
这里的rewrite实现的比较简单,暂时没有apache那么强大的功能
但应该满足我们日常的开发需求
例
{
hosts: {
'style.c.aliimg.com': {
root: '/Users/bencode/webroot/styles',
rewrite: [
{
from: '^/app/offer/(.*)$',
to: 'styleoffer/$1'
},
{
from: '^/app/butterfly/(.*)$',
to: 'butterfly/$1'
},
{
from: '^(.*)$',
to: 'http://110.75.196.23$1'
}
]
}
}
}
- rewrite 需要配置成一个数组,每个数组元素是一个对象
- 每个rewrite对象需要指定 from 和 to 属性
- from是一个正则式,可以以字符串形式指定,也可以使用js的正则式语法
- to表示要重写的目标位置。可以是 http://地址,也可以是本地地址。本地地址可以是相对于root,也可以是绝对地址
- to中可以使用正则表达式的替换符,如 $1, $2, 也可以使用配置信息替换符,如 {root}, {host}, {port}等
- 只有当目标位置存在时,重写规则才生效。暂时没有对url目标重写做存在检测,后续可能会加404检测。
- rewrite规则按顺序执行
上例配置了3条rewrite规则:
- 对于 http://style.c.aliimg.com/app/offer/... 下的文件,重定向到 /Users/bencode/webroot/styles/styleoffer/...
- 对于 http://style.c.aliimg.com/app/butterfly/... 下的文件,重定向到 /Users/bencode/webroot/styles/butterfly/...
- 如果还是找不到,最后到 http://110.75.196.23上去抓取
[注]
默认情况下,只有文件直接在本地找不到时,才会使用rewrite规则
因为默认的文件访问是使用 host filter进行的,而host filter排在rewrite filter之前
请参考 filters.js
merge
merge文件实时编译
如果配置
{
hosts: {
'style.c.aliimg.com': {
root: ...,
merge: true
}
}
}
则js/css符合merge文件格式时,会返回merge后的结果文件
因为有些页面在没merge时,可能不能正常工作,可以开启这个选项来开发。
less
less文件进行实时编译
- 如果访问less文件时,则会直接返回less文件
- 如果访问css文件时,在对应位置有less文件时,则读取此less文件,并编译成css文件输出
- 如果less文件对应位置有css文件,则编译好less文件后,会将css代码写回已存在的css文件,达到自动更新功能。如果css文件不存在,则不进行写操作。
- 可以指定 less 选项,可参考 Less中文文档
例
{
hosts: {
'style.c.aliimg.com': {
less: {
...
}
}
}
}
[注]
如果原css文件的访问需要url rewrite,则对less的支持也需要url rewrite支持
例:
'style.c.aliimg.com': {
root: '/Users/bencode/webroot/styles',
merge: true,
rewrite: [
{
from: /^\/app\/butterfly\/(.*)\.css\b/,
to: 'butterfly/$1.less'
},
{
from: '^/app/butterfly/(.*)$',
to: 'butterfly/$1'
}
]
...
以上将 app/butterfly/.../some.css 重写向成 app/butterfly/.../some.less以提供对less的支持
concat
支持tengine concat协议和小米模块concat协议
即能够理解下面两种形式的url
http://assets.1688.com??css/ui/form.css,css/ui/table.css...
和
http://cdn.c.aliimg.com/css/ui/form|css/ui/table|...|css/ui/tab.css
你首先需要把以上host绑定到本地
如: 127.0.0.1 asserts.1688.com 127.0.0.1 cdn.c.aliimg.com
默认情况下,url中的资源会被请求,然后返回合并后的文件
如果配置参数 concatSplit: true, 则会仅仅输出他们的引用,这样在调试时可能会更方便
如指定了 concatSplit: true, 则会得到类似以下输出:
@import url(http://style.c.aliimg.com/sys/css/universal/masthead/industry-v1-min.css);
@import url(http://style.c.aliimg.com/fdevlib/css/fdev-v4/editor/editor-min.css);
@import url(http://style.c.aliimg.com/fdevlib/css/fdev-v4/core/fdev-flying.css);
delay
如果配置了 delay: true
则对相应资源的访问可以延迟指定时间返回。
如访问 http://style.c.aliimg.com/app/butterfly/js/lang/class.js?delay=2
则过2s才返回这个url的内容
jade
支持jade 模板文件的解析
如果访问的文件后缀为 .jade 或者 url带有参数 ?type=jade,则会解析内容成html代码
可以指定参数 jade来配置 jade parser
参考文档 jade readme
markdown
支持markdown文件的解析
如果访问的文件后缀为 .md 或者 url带有参数 ?type=md, 则会解析内容成html代码
添加?autoreload, 则浏览器有自动刷新的功能,方便文档的编写
可以指定参数 markdown来配置 markdown parser
参考文档 markdown
stylus
支持stylus文件的解析
如果访问的文件后缀为 .stylus 或者 url带有参数 ?type=stylus, 则会解析内容成css代码
app
可以使用app提供的开发特性来开发具有ui的功能
可以参考内置demo: app/host
可以通过访问http://127.0.0.1/host进行app的访问
你也可以建立自己的app集
hosts: {
myapp: {
appRoot: '/Users/bencode/work/myapp'
}
}
你可以在自己的目录下开发app
livereload
对html本身里的引用的js/css文件自动监控,支持实时刷新,实时编译,需与gulp/grunt的watch配合
tpl2js
方便arttemplate的实时编译调试
如果访问
.art
或.tpl
文件时,编译成.js
文件输出配置放在对应的host配置中,建议针对不同的项目设置不同的hostname
hosts: {
project: {
root: '/Users/bencode/project',
tpl2js:{
type:'fmd',
alias:'lib/template'
}
}
}
- 配置说明
字段 | 类型 | 默认值| 说明
------------ | ------------- | ------------ | ------------
type | String | fmd
| 返回的模块类型,可选:fmd
、pure-fmd
、cmd
、amd
、commonjs
,参考Ali-tmodjs
alias | String | template
| arttemplate的主文件的模块id名
chinese2unicode
动态地将被请求的 js 文件中的中文转成 unicode 形式。使用很简单,如需要转 unicode,首先需要确保已注册了 chinese2unicode 模块:
filters: [
'less',
~~
'chinese2unicode', \\ 确保已注册
~~
'host',
'rewrite'
]
然后在对应的 rewrite 规则里增加一个 chinese2unicode 字段、并设置为 true 即可,形如:
{
from: /^\/m\/huopin\/(.*)$/,
to: '$1',
chinese2unicode: true
}
已支持特性
0.8.8
- tpl2js - arttemplate开发支持
0.8.6
- livereload - html实时监控,需配合gulp/grunt插件使用
v0.8.5
- outputCharset支持
支持配置outputCharset,输出html, css文件时Context-Type中会指定charset
示例(config.js)
hosts: {
'webroot': {
root: '/Users/bencode/webroot',
outputCharset: 'gbk'
},
...
- 去掉connect 3.0已废弃方法警告
v0.7
- host - 多host支持
- rewrte - url rewrite
- merge - merge文件预合并
- less - less开发的支持
- concat - tengine concat和小米concat协议支持
- delay - 资源延迟返回
- jade - jade模板格式支持
- markdown - markdown格式支持
- stylus - stylus开发的支持
- app - 对具有界面功能的开发支持, 目前内置的app有:
- host - 对host进行管理的一个app demo
- help - 帮助文档
扩展和开发
- 可以参考 lib/filter包下面的示例进行开发
- 每个filter都是一个connect中间件, 参考文档 Connect
- 请安装node-dev(npm install -g node-dev),这样在开发时,可以在文件修改后自动重启服务器
- 默认启动时,会启动多个子进程,可以加-d选项,在开发时只启动一个进程,以更方便调试