Brunch：入门上手

时间 2020-01-04

标签 brunch 入门上手繁體版

原文原文链接

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

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

Brunch 可以：html

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

这篇指南的目的是实现一个简单的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