Brunch：入门上手

2024年2月11日 213次阅读 来源: developerworks

在 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

    原文作者：developerworks
    原文地址: https://segmentfault.com/a/1190000006024037
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞