前端代码打包工具,适合于前端工作者及小中型开发团体快速构建和发布前端工程。

具体功能:

• 动态脚本 - JavaScript 代码合并、压缩:
  • JavaScrirpt 动态合并、压缩;
  • CoffeeScript 预编译,并可合并进JavaScript。
• 样式表 - CSS 代码合并、压缩:
  • 基于LESS构建的(一种CSS预处理语言,如果对他不熟悉,那么可以直接写CSS代码,只是文件扩展名不同罢了);
  • LESS 预编译、动态合并、压缩;
  • Image 图片绝对路径转换;
  • 自动添加CSS兼容性代码
• 版本号系统 - 解决开发和线上版本问题:
  • 为html中的script和link所引入的js和css文件加上版本号;
  • 为css中的image加上版本号;
  • 支持版本号写入页面全局变量。
• 支持模拟Ajax和Jsonp - 让测试更简单:
  • 支持Ajax的get请求,并以json数据格式返回;
  • 支持jsonp请求,并以json数据格式返回;
  • 支持读取*.json文件数据;
  • 支持使用自定义的JavaScript来处理请求。
• 本地服务器 - 不懂后端也能建服务:
  • 可切换的服务器环境;
  • 动态增添项目,无需重启服务;
  • 避免本地开发的种种问题。
• 远程日志 - 在浏览器窗口中显示工具日志信息,用前端技术解决前端问题。
• 可视化UI - 直观、方便、容易操作。
• 兼容系统 - 现兼容MacOS及Window操作系统。

• 基于Node-Webkit编写的可视化前端打包工具,基于nodejs和前端技术。
• 支持JavaScript和CoffeeScript的动态混合打包,及合并压缩。
• 支持LESS预编译,支持动态打包合并,支持代码压缩。
• 支持测试数据模拟,支持Json数据返回,支持请求动态处理,支持Ajax和Jsonp。

• 基于NodeJS搭建服务器,快速搭建本地服务环境。
• 基于Sokcet.io的远程日志输出。
• 使用Node-Webkit-Packager打包。
• 使用UglifyJS对JavaScript代码进行格式化和压缩。
• 使用CoffeeScript编译器进行Coffee预编译。
• 使用Node-Less进行LESS预编译。
• 使用Node-Css-Prefix对Css进行浏览器兼容,如自动添加-webkit-、-moz-前缀等。
• 使用ycssmin对CSS进行压缩。
• 界面基于jQuery,BootStrap v3,jQuery custom content scroller构建的。

主界面

日志页面

约定的目录结构如下:

project
|-- conf
 |-- js
 `-- css 
|-- data
|-- production
`-- src
 |-- js
 |-- less

• src为源码目录,js子目录下为JavaScript或CoffeeScript源码,less子目录下为less源码。
• conf为配置目录,js子目录下为JavaScript文件打包配置,css子目录下为css文件打包配置。
• production为产品目录,为打包后的项目代码。
• data为模拟数据目录。

• 按照约定目录,建立项目,启动服务后,项目的访问路径为http://127.0.0.1:端口号(默认8080)/项目名/。
• JavaScript引入方式是$Import('path/to/file.js'),如果是CoffeeScript,那么拓展名为.coffee,相对路径的root为src/js/。(.js可以省略)
• Less使用标准的引入方式,@import "path/to/file",相对路径的root为src/less/。
• 在DEV开发环境下,访问项目路径下的js和css目录中的文件,会根据conf配置返回内容,其他文件会直接返回src下的相应文件。
  • 例如访问http://127.0.0.1:8080/example/js/index.js,那么会根据conf/js/index.js返回相应内容,如果是index.min.js,那么会压缩后返回。
• 在PD生产环境下,访问项目路径下的js和css目录中的文件,会直接返回production中的相应文件。
• 如果访问项目路径下的path/to/name.json或path/to/name.jsonp,(先仅支持get请求)
  • 如果存在data目录下的path/to/name.json文件,则直接返回其中的json数据。
  • 如果存在data目录下的path/to/name.js文件,则会执行此js中的方法,返回方法return的object数据。

Example1:

// args为请求的参数对象,a、b为请求时所带的参数
function exec(args) {
 var a = parseInt(args.a) || 0,
 b = parseInt(args.b) || 0;
 return {
 rs : a + b
 };
}

Example2:

//同一个项目会有一个global对象可以操作,可以存取一些数据,模拟相关的逻辑
function exec(args) {
 global.value = args.value;
 return {
 result : true
 };
}
/*----------------------------------*/
function exec(args) {
 return {
 value : global.value || ''
 };
}

本项目example目录下为示例项目。

Beta (0.2.1) 2013年11月05日

更新内容:

1. 修复已知Bug。

下载地址:

• Mac FE-Builder-0.2.1-Mac.zip
• Win FE-Builder-0.2.1-Win.zip

Beta (0.2.0) 2013年10月23日

更新内容:

1. 增加版本号系统。
2. 优化日志输出。
3. 修复已知Bug。

下载地址:

• Mac FE-Builder-0.2.0-Mac.zip
• Win FE-Builder-0.2.0-Win.zip

Beta (0.1.1) 2013年10月22日

更新内容:

1. 对css进行多浏览器兼容,例如自动添加-webkit-、-moz-前缀。
2. 日志输出优化。
3. 界面拖动问题修复。

下载地址:

• Mac FE-Builder-0.1.1-Mac.zip
• Win FE-Builder-0.1.1-Win.zip

Beta (0.1.0) 2013年10月14日

下载地址:

• Mac FE-Builder-0.1.0-Mac.zip
• Win FE-Builder-0.1.0-Win.zip

• 界面优化
• ReadMe优化