CODE 项目整体迁移至码云平台(https://gitee.com)公告
EdwonLim / FE-Builder JavaScript

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

javascript 合并 压缩 前端 coffeescript

README.md

FE-Builder-前端打包工具(Beta)

Introduction

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

具体功能:

  • 动态脚本 - JavaScript 代码合并、压缩:
    • JavaScrirpt 动态合并、压缩;
    • CoffeeScript 预编译,并可合并进JavaScript
  • 样式表 - CSS 代码合并、压缩:
    • 基于LESS构建的(一种CSS预处理语言,如果对他不熟悉,那么可以直接写CSS代码,只是文件扩展名不同罢了);
    • LESS 预编译、动态合并、压缩;
    • Image 图片绝对路径转换;
    • 自动添加CSS兼容性代码
  • 版本号系统 - 解决开发和线上版本问题:
    • html中的scriptlink所引入的jscss文件加上版本号;
    • css中的image加上版本号;
    • 支持版本号写入页面全局变量。
  • 支持模拟AjaxJsonp - 让测试更简单:
    • 支持Ajaxget请求,并以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子目录下为JavaScriptCoffeeScript源码,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,相对路径的rootsrc/js/。(.js可以省略)
  • Less使用标准的引入方式,@import "path/to/file",相对路径的rootsrc/less/
  • DEV开发环境下,访问项目路径下的jscss目录中的文件,会根据conf配置返回内容,其他文件会直接返回src下的相应文件。
    • 例如访问http://127.0.0.1:8080/example/js/index.js,那么会根据conf/js/index.js返回相应内容,如果是index.min.js,那么会压缩后返回。
  • PD生产环境下,访问项目路径下的jscss目录中的文件,会直接返回production中的相应文件。
  • 如果访问项目路径下的path/to/name.jsonpath/to/name.jsonp,(先仅支持get请求)
    • 如果存在data目录下的path/to/name.json文件,则直接返回其中的json数据。
    • 如果存在data目录下的path/to/name.js文件,则会执行此js中的方法,返回方法returnobject数据。

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优化