FE-Builder-前端打包工具（Beta）

Introduction

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

具体功能：

• 动态脚本 - 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操作系统。

Features

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

Components

• 基于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构建的。

Interface

主界面

日志页面

Agreed Directory

约定的目录结构如下：

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

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

Quick Start

• 按照约定目录，建立项目，启动服务后，项目的访问路径为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目录下为示例项目。

Download

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

Todo List

• 界面优化
• ReadMe优化