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文件的內容, 很簡單就一行: