陈斌彬的技术博客

Stay foolish,stay hungry

Html5 构建工具-Brunch

img

Brunch,一个超快的 HTML5 构建工具。它可以(官方介绍):

  • 编译你的脚本,模板,样式,链接它们,
  • 将脚本和模板封装进 common.js/AMD 模块里,链接脚本和样式,
  • 为链接文件生成源地图,复制资源和静态文件,
  • 通过缩减代码和优化图片来收缩输出,看管你的文件更改,
  • 并且通过控制台和系统提示通知你错误。

其实说白了就是:Brunch 是一款 HTML5 应用软件的汇编程序,他可以适用于任何架构、数据库、编程语言,样式表,模板和后台技术。

更关键的是他是开源的,所以小伙伴们可以开心的快速构建自己的 html5 应用了。

安装

Installation is one-line, once you have node.js. In your console, run:

npm install -g brunch

创建新的brunch项目

brunch new <skeleton-URL> [optional-output-dir]

尖括号为你想使用的框架的 url 链接,中括号的为选填属性,brunch 现在在 github 上有 50+ 的框架,下面我们可以举一个例子

$brunch new https://github.com/monokrome/brunch-with-brunch

但是需要注意:你要放置新项目的文件夹必须为空,否则会发生克隆失败。

使用brunch开发应用

使用命令

$brunch watch --server

会打印以下内容

➜ /Users/apple/brunchdemo git:(master) ✗> brunch watch --server
09 Jun 13:55:17 - info: application started on http://localhost:3333/
09 Jun 13:55:17 - info: compiled 3 files into 2 files, copied 2 in 328ms

信息内容很简单,就是建了一个微型的服务器,并且把该压缩的文件都压缩了。