Welcome to ezbuild
ezbuild 从ejs扩展的mvc的模块化构建工具，主要用来构建和管理js,css ,html ,images
安装
npm命令:
- npm install -g ezbuild
Get Start
第一步 :初始化
1:初始化环境 进入workspace文件夹，进行初始化操作：ezbuild createev 效果：创建如下文件夹： 'build','build/images/','build/js/','build/css/','src/','src/css/','src/js/','src/images/'
2:初始化package.json 设置环境变量 "build":{ "project":"mytestproject", "version":"0.0.1", "buildroot":"./build/", "outputroot":"./src/", "componentsroot":"c:/components",//模块存放路径 "ftp":{ "ftpaddress":"/ftpurl/",//本工程对应ftp路径 "website":"http://ftptest.dev.sina.cn/project/",//ftp测试url "host": "172.24.12.15", "port":21, "user": "username", "password": "password" }, "online":{ "onlineaddress":"http://mjs.abc.cn/wap/project/",//线上对应工程路径 "addjs_online":"http://mjs.sinaimg.cn/wap/online/public/addjs/addjs.min.js?v=0.1", "svn":{ } } }
第二步：书写模板
模板写法
主要参考ejs语法（略）
新增语法： 1、includeModule <% includeModule header{} %> 从模块文件夹中找对应的header的文件夹模块，并进行填充。填充时首先嵌入入口文件index.html 可支持相对路径 <% includeModule header/picheader {} %>
参数设置： { params:'' } 请参考 参数化的模块化编程
2、includeJs <% includeJs js/xwipe.js%> 将相对路径的 js/xwipe.js放入addjs中
3、includeCss <% includeCss css/wemedia.css%> 将相对路径的 js/wemedia.js放入addjs中
4、includeAt <% includeAt {path:'',pathtype:'head',type:'appendlast',html:''}%> //插入script标签 <% endAt %> 在页面的某个元素的某种位置加入某行代码。 includeAt 参数： { path:'$[?(@.name=="html")].children[?(@.name=="head")]', pathtype:'head', type:'appendlast' } path参数用htmlparser2进行dom元素json化之后利用jsonpath进行dom元素定位 pathtype:定义了两种常用的元素:head,body。 type定义了4种类型：appendlast//appendfirst//insertbefore,insertafter includeAt 和endAt标签之间的就是将要切入的html
第三步：生成开发环境
在workspace根目录下执行命令： ezbuild build details.html 效果： 将js,css,images生成到对应的build和src文件夹的对应文件夹中 将生成的html输出到src的目录下 生成清单： build/js/details.js//定义所有的reqirejs依赖 build/css/details.css//定义所有的reqirecss依赖 build/images/字体+图片
src/js/details.debug.js src/js/details.min.js src/js/details.config.js src/js/details.controller.js//开发环境中页面级的脚本，其中包含有针对build/js/details.js的reqire依赖，请不要删除
src/css/details.controller.css//开发环境中页面级的脚本，其中包含有针对build/css/details.css的reqire依赖，请不要删除 src/css/details.debug.css src/css/details.min.css
第四步：在src开发环境中进行开发
1、编写代码在src/js/details.controller.js 2、编写代码在src/css/details.controller.css 3、编写代码在details.html
第五步：将代码上传到ftp
命令：ezbuild ftp details.html
with -a :将images，js，css,details.html都上传到ftp上。
without -a :只上传js,css,details.html
ftp路径计算：根据"ftp"."ftpaddress作为相对路径
模板
页面模板
页面模板中外部变量输入： 1、项目中的package.json对象，包括build下的project，，version ftp，online等 2、待定
模块模板
模块模板外部变量输入： 1、页面级的变量和模块中变量共享 2、页面级中的模块调用includeModule参数
模块化编程（第一版）
1、模块入口页面为模块文件夹目录下的index.html 2、设计该模块的接口参数 3、根据接口参数书写实现html， 4、利用模板语言控制js，css加载，控制html
Update Record
1、2016年4月1日 将要更新：build的时候通过image文件md5对比，如果图片版本不同，则找到css中和html中的图片路径加入版本号以解决cdn+浏览器缓存的问题。解决方式：URL中追加？或者&v_img=1
2、将要更新功能点：支持脚本中的 @requireTemplate('filepath'); 通过解析引擎解析模板并转化为编译过脚本 此举的作用是构建使用模板预言快速可维护，构建时进行模板语言预解析，将解析之后的代码发布出去，提高性能。 比如： var actionTemplate_FeedContent = @requireTemplate('filepath');
对应的解析模板为： <% if(data.flag){%> 呵呵 <%} else{%> 哈哈 <%}%> 将解析为： var actionTemplate_FeedContent =function(data){ var content =""; if(data.flag){ content+="呵呵" } else{ content+="哈哈"; } return content; }
关于requireTemplate的结构安排： 在addjs 之后执行解析requilreTemplate操作。 构建过程中由于脚本中不能加入构建变量（目前不支持，开发过程中容易和runtime变量搞混，可能以后也不支持） 所以需要在模板中进行脚本变量的依赖解耦。
3、集成bom处理:removebom, 不再构建过程中支持该方法，得手动进行处理。