New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

front-build

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

front-build

build front project


Version published
Maintainers
1
Created

Front-Build

  • 基于目录规范
  • 自动化打包
  • 零配置

目录规范

- app                           // root of app
    ├ common                    // 通用脚本与样式, 可直接引用,独立打包
    ├ utils                     // 通用组件, 使用时打包入page使用, 一般不单独引用
    │   ├ countdown
    │   │   ├ index.js
    │   │   └ countdown-mod.js
    │   └ text-formater
    ├ homepage                  // page 目录
    │   ├ 1.0                   // page 版本 目录
    │   │   ├ test              // 测试用例 目录
    │   │   ├ core              // page 的入口文件目录, 打包,引用的入口
    │   │   │   ├ base.js
    │   │   │   ├ style1.css
    │   │   │   └ style2.less
    │   │   ├ mods              // page的模块目录
    │   │   │    ├ mod1.js
    │   │   │    ├ mod2.js
    │   │   │    ├ mod3.js
    │   │   │    ├ mod1.css
    │   │   │    └ mod2.css
    │   │   ├ fb-build.sh       // 打包快捷方式
    │   │   ├ fb-build.bat      // 打包快捷方式
    │   │   └ fb.page.json      // page 相关配置
    │   └ 20121221              // 打包后的时间戳目录
    │       ├ build.json        // 打包信息
    │       └ core              // 打包只处理core目录,生成-min.js 的压缩版本
    │           ├ base.js
    │           ├ base-min.js
    │           ├ style1.css
    │           ├ style1-min.css
    │           ├ style2.css
    │           └ style2-min.css
    └ fb.json                   // 应用的配置

FB如何构建你的代码

page

特点
  • 基于时间戳目录
  • 从入口文件(core 目录)开始
  • 支持编码设置
fb使用以下步骤构建
1. 创建目录 临时src (page.srcDir); 临时build (page.destDir); timestame目录
2. 将版本目录里面的文件,转成utf8编码, 并全部拷贝到 src 目录
3. 使用内置插件系统

    1. module-compiler: KISSY的模块打包, 从src/core/xx.js -> build/core/xx.js
    2. css-combo: css打包, 从src/core/xx.css -> build/core/xx.css
    3. lesscss:  打包, 从 src/core/xx.less -> build/core/xx.less.css
    4. concat: 根据配置合并文件
    5. uglifyjs: build/core/xx.js -> build/core/xx-min.js
    6. cssmin: build/core/xx.css -> build/core/xx-min.css
    
4. 将build下的所有文件转码到outpuCharse,并复制到timestamp目录
5. 在timestamp 目录下生成 包含打包信息的 build.json.

common

1. 创建目录: 临时src (common.srcDir); 临时build (common.destDir);
2. 将common目录里面源码文件,转成utf8编码, 并全部拷贝到 src 目录
3. 使用内置插件系统

    1. module-compiler: KISSY的模块打包压缩, 从src/xx.index.js -> build/xx.index-minjs
    2. lesscss:  打包, 从 src/xx.less -> build/core/xx.less.css
    3. uglifyjs: build/xx.js -> build/xx-min.js
    4. cssmin: build/xx.css -> build/xx-min.css
    
4. 将最终压缩文件 build/xx-min.yy 文件从 utf-8 转码到 outpuCharse,并复制回 common
5. 在timestamp 目录下生成 包含打包信息的 build.json.

TODO

utils

TODO

安装

1. 首先安装nodejs环境 (and npm);
2. npm install front-build -g;
3. done!

快速开始

初始化一个应用

初始化一个项目文件夹为Root

cd dir/to/app
fb init

创建一个 Page

在应用里面创建一个Page。在应用目录内执行

fb add name_of_page

为Page创建一个 Version

在page文件夹里面执行, 为当前Page 创建一个version

fb version version_of_your_page

or

fb ver 1.0

构建

单个page构建

fb build {pagename}@{version} -t {timestame}

sample:

fb build about@1.0 -t 20120601

构建所有页面

fb build all -t 20121221

同时构建多个page

fb build pagea@1.0 pageb@2.0 pagec@1.0 -t 20121221

common 目录构建

fb build common

Bugs

兼容性

FAQs

Package last updated on 15 Jun 2012

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts