Giters

CuityMiko / FE-Builder

前端代码打包工具，支持JavaScript，CoffeeScript，CSS， LESS代码的预编译、打包合并、压缩等，支持实时动态打包，支持Json数据模拟。

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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。

下载地址：

Beta (0.2.0) 2013-10-23

更新内容：

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

下载地址：

Beta (0.1.1) 2013-10-22

更新内容：

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

下载地址：

Beta (0.1.0) 2013-10-14

下载地址：

Todo List

  • 界面优化
  • ReadMe优化

About

前端代码打包工具，支持JavaScript，CoffeeScript，CSS， LESS代码的预编译、打包合并、压缩等，支持实时动态打包，支持Json数据模拟。

Languages

Language:JavaScript 90.2%Language:CSS 6.4%Language:HTML 3.4%Language:CoffeeScript 0.0%