模块话的前端开发方案及和Nodejs结合的静态服务器方案

页面 = 模块1 + 模块2 + 。。。 + 页面自身内容

模块 = HTML + Javascript + LESS

页面结构 = 模块1的HTML + 模块2的HTML + 。。。 + 页面本身HTML

开发环境

• assets 静态资源目录
• components 模块
  • footer
    • footer.html
    • footer.js
    • footer.less
• 页面路由 routes该页面下的路由会被自动挂载
• pages 视图模板
  • home
    • home.html
    • home.js
    • home.css
  • about
    • about.html
    • about.js
    • about.css

资源请求路径

传统方案

version = 20150826162931
cdn/version/js/p/home.js
cdn/version/css/p/home.css
cdn/version/img/home/bar.png
cdn/version/img/logo.png

• 导出文件MD5的JSON文件
• 导出Grunt配置文件

动态合并方案

• css {{style mod/header,mod/footer,tpl/home/home }} --> static/api?p=m.etaoshi.com&v=version&css=mod/header,mod/footer,tpl/home/home cdn/rel/version/js/j8dkjJjsdf.css

• js cdn/rel/version/img/s1j42kj420f.js --> ?p=m.etaoshi.com&v=version&js=mod/header,mod/footer,tpl/home/home

• img cdn/rel/version

多项目开发[静态资源服务器]

var projects = {
	m.etaoshi.com : {
			component:'',		//组件目录
			tpl: '',			//页面目录	
			jsCom: '',		//JS组件目录
			less: '',			//LESS类库目录
			realease: '',		//资源发布目录
	}
};

var ast = astro();
for(var prj in projects){
	ast.configProject(prj, projects[prj]);
}

ast.listen(3000);

静态服务器目录

• routes

  • api.js 提供内网访问的获取图片、CSS、和JS引用路径

• m.etaoshi.com

  • version
    • 图片资源
    • /css/img/p/banner1.8j4h4h.png
    • /css/img/m/loc.8j4h4h.png
    • 传统方案
    • /js/p/home.j23j4hd.js
    • /css/p/home.8j4h4h.css
    • /css/p/home.8j4h4h.css
    • 动态合并方案
    • tpl
    • component
    • jslib
    • rel

• tuan.etaoshi.com

  • version