node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org »

ezbuild

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, 不再构建过程中支持该方法,得手动进行处理。