Brunch：入门上手

在 Phoenix 项目中遇到关于 Branch 这个 HTML5 构建工具的问题, 在这里为了剥离问题的复杂度, 独立创建一个 Branch 前端项目来探索如何使用 Brunch 这个全新的前端构建工具.

Brunch 是一个HTML5的构建工具, 对于前端开发, 它能够帮助你设置和维护高效的工作流.

Brunch 能够：

编译脚本, 模板和样式单
Lint工具
把Javascript代码包装成 CommonJS 或AMD模块
合并脚本和样式文件
自动复制资源和静态文件
监视文件变更并重新编译
错误通知(桌面通知,使用brunch watch时如果发生错误,会以桌面通知的形式通知你)

这篇指南的目的是实现一个简单的Branch演示程序来了解一个Branch项目的结构. 然后展示如何使用项目骨架来开始构建和创建应用程序.

安装 Brunch

npm install -g brunch

确认安装过程完成后, 使用下面的命令验证安装是否成功:

brunch -v

如果输出版本号, 标识安装成功

2.8.2

创建一个基本的Brunch项目

为了掩饰一个Brunch项目的结构和工作流, 我们用一个静态的HTML页面, CSS样式单(使用SASS, 以及一个基本的ES3/ES5 Javascript文件创建一个简单的演示程序.

首先使用下面的命令创建一个基本的项目目录结构和配置文件:

brunch new branchio-semantic-ui-demo

有很多命令行选项可以用, 我们将在稍后再来探讨.

基本的项目目录结构如下:

├── README.md
├── app
│   ├── assets
│   │   └── index.html
│   └── initialize.js
├── brunch-config.js
└── package.json

app, 项目的源代码目录, 包括脚本文件, 样式表文件, 模板文件, 这些需要被Branch编译的文件放在这里.
assets, 静态资源目录, 该目录会递归地不加修改和处理地复制到目标目录(一用于存放需要部署到线上Web服务器的目录)
public

设置项目文件

下面是一个简单的HTML页面, 我们将以此作为例子来说明.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>Brunch with ES6</title>
  <link rel="stylesheet" href="/app.css">
  <style type="text/css">
    body {
      background: #FFF;
    }
    #app {
      font-size: 14px;
      font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    }
    #app > div {
      margin: 100px 0;
    }
  </style>
</head>
<body>
  <div id="app" class="ui container">
    <div class="ui card">
      <div class="image">
        <img src="/images/avatar2/large/kristy.png">
      </div>
      <div class="content">
        <a class="header">Kristy</a>
        <div class="meta">
          <span class="date">Joined in 2013</span>
        </div>
        <div class="description">
          Kristy is an art director living in New York.
        </div>
      </div>
      <div class="extra content">
        <a>
          <i class="user icon"></i>
          22 Friends
        </a>
      </div>
    </div>
  </div>
  <script src="/vendor.js"></script>
  <script src="/app.js"></script>
</body>
</html>

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
$default-bg: lightblue;
$default-text: black;
$roboto-slab: 'Roboto Slab';
body {
  font-family: $roboto-slab;
  font-size: 16px;
  background: $default-bg;
  color: $default-text;
}
h1 {
  font-size: 2em;
  margin: 0.5em 0 1em;
  & > small {
    color: red;
    font-size: 70%;
  }
}

安装Brunch插件

npm install --save-dev javascript-brunch sass-brunch

构建项目文件

brunch build

生成的文件在public目录中, 如果想压缩, 合并这些文件, 可以带 --production, 或 -p 参数.

brunch build -p

public 目录是可以完全删除的, 重新运行 brunch build 会自动重新编译和生成.

即时预览

branch watch --server 这个命令可以自动监视项目目录, 并且启动了一个Web服务器监听在本机http://localhost:3333这个地址上, 在浏览器上输入http://localhost:3333可以实时预览你的修改, 浏览器会自动刷新页面.

关于ES6

如果想用ES6开发项目, 在创建项目的时候可以用es6模板来生成一个项目

brunch new proj -s es6

自动刷新

很多年前那种编辑 -> 刷新 -> 编辑 -> 刷新的工作流已经不适合现代工程化的前端开发了, 我们需要的是效率, 把重复的工作交给机器自己做. 因此我们需要自动刷新页面预览修改效果. 这里用到了Brunch的 auto-reload-brunch 插件. 首先需要安装它.

npm install --save auto-reload-brunch

注: 经过测试, 目前 auto-reload-brunch 插件只能用于 brunch watch 命令, brunch watch --server 的自动刷新有问题, 只能单独用一个Web服务器来把public目录作为根目录提供服务.

大多数情况下, 自动加载插件不需要任何配置就可以直接工作.

配置为文件

Brunch 和 Npm 的集成, 如果打开Npm的支持, Brunch 能够直接使用 package.json 文件中的信息来把Npm工具集成到Brunch项目当中.

完整的配置文件

module.exports = {
  npm: {
    enabled: true
  },
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/
      }
    },
    stylesheets: {
      joinTo: {
        'vender.css': /^node_modules/
      }
    }
  },
  paths: {
    "public": "public",
    "watched": [
      "app/"
    ]
  },
  modules: {
    autoRequire: {
      "js/app.js": ["app/app"]
    }
  },
  plugins: {
    babel: {presets: ['es2015']},
    coffeescript: {bare: true},
    autoReload: {
      delay: 500,
      enabled: true,
      port: [9000],
      forceRepaint: true,
      host: "127.0.0.1"
    }
  }
};

集成 Semantic UI

Semantic UI 是一个类似 Bootstrap 的CSS框架, 它比较符合我这种外观党的审美, 它做出来的默认UI样式确实看上去比Bootstrap默认的UI要精美一些, 对于我这种懒得去调CSS样式的人来说, 是比较合适的. Semantic UI官方文档的安装说明介绍说用 npm install semantic-ui --save 的方式来安装. 安装过程会提示你选择一大堆配置和路径, 选择默认安装选项即可.

默认安装到项目目录的semantic子目录下. 同时, 在项目根目录下还会生成一个 semantic.json 的文件用于描述 Semantic UI的配置.

Branch 默认的前端源代码目录为 app, 为了保持项目的干净, 我创建了一个app/app.less文件来导入(@import) Semantic UI的LESS库文件. 下面是app.less文件的内容, 很简单就一行:

@import '../../semantic/src/semantic';

导入时注意一下相对路径就好. 现在就完成了Semantic UI框架的引入了. brunch build 一下在 public 目录中就可以看到编译后的输出了, 对了不要忘了安装Brunch 的 less-brunch插件:

npm install --save less-branch

源码

https://github.com/developerworks/branchio-semantic-ui-demo

参考资料

https://community.nitrous.io/tutorials/getting-started-with-brunch
http://brunch.io/docs/getting-started