什么是 brunch
Brunch 是一个快速、强大的前端构建工具，它使用 NPM 来存储模块，并且支持 Babel、JSX、CoffeeScript等技术，可以自动编译 Sass、Less等样式文件，同时可以处理图片、字体等静态资源。
安装 brunch
使用 npm 命令安装 brunch 时，需全局安装它：
npm install -g brunch
如果您使用 Yarn，那么它的全局安装命令就应该为：
yarn global add brunch
使用 brunch 创建项目
在命令行中使用以下命令创建一个新项目：
brunch new my-project
注：my-project 是您的项目名称，可以是您喜欢的任何字母数字组合。
然后在项目目录下，执行以下命令，在浏览器中打开项目默认首页：
cd my-project brunch watch --server
配置文件
Brunch 使用一种类似于 Grunt 和 Gulp 的配置文件来完成其任务。该配置文件的名称为 brunch-config.js，位于您的项目根目录下。一个基本的配置文件如下所示：
-- -------------------- ---- -------
-------------- - -
------ -
------------ -
------- --------
--
------------ -
------- ---------
-
--
------ -
------- --------
--
-------- -
------ -
-------- ---------- ---------
-------- ------------------------------
-
-
--该配置文件包含三个主要部分：files、paths 和 plugins。其中：
files指定了 brunch 将要处理哪些文件（或者更准确地说， brunch 将要处理哪些类型）。paths告诉 brunch 将编译后的文件放在哪个文件夹中。plugins告诉 brunch 启用哪些插件。
插件
Brunch 是高度可扩展的，并且允许使用几乎任何外部插件。以下是几个常用的插件：
1. Brunch with Babel
Brunch with Babel 插件使得 brunch 支持 ES6。
npm install --save-dev babel-brunch
其中，--save-dev 参数将其添加到开发依赖中。添加之后，在 brunch-config.js 中添加以下代码即可启用该插件：
module.exports = {
plugins: {
babel: {
presets: ['latest', 'react']
}
}
};注：latest预设可以帮助我们使用最新的 ES 特性。
2. Brunch with Sass
Brunch with Sass 插件使得 brunch 支持 Sass。
npm install --save-dev sass-brunch
然后，添加以下代码到 brunch-config.js：
-- -------------------- ---- -------
-------------- - -
------ -
------------ -
------- ---------
-
--
-------- -
----- -
-------- -
------------- -------------------------------
-
-
-
--3. Brunch with ESLint
Brunch with ESLint 插件使得 brunch 支持 ESLint 代码检查。
npm install --save-dev eslint eslint-brunch
然后，在 brunch-config.js 中添加以下代码启用该插件：
module.exports = {
plugins: {
eslint: {
pattern: /^app[\\/].*\.js?$/
}
}
};4. Brunch with React
Brunch with React 插件使得 brunch 支持 React。
npm install --save-dev react react-dom babel-preset-react
在 brunch-config.js 中添加以下代码启用该插件：
module.exports = {
plugins: {
babel: {
presets: ['latest', 'react']
}
}
};常用命令
Brunch 最大的优点是它的速度。Brunch 构建只需要几秒钟，这就使得它成为使用带有实时预览的开发环境的理想选择。
以下是常用的 Brunch 命令：
brunch build：构建项目brunch watch：监视项目中的更改并重新构建项目brunch watch --server：监视项目中的更改，重新构建项目，并在浏览器中打开一个 Web 服务器以提供实时预览
总结
Brunch 是一个十分强大的前端构建工具，它可以处理 JavaScript、CSS、图像等文件，并且支持多种插件。Brunch 使用简单，速度快，自定义程度高，这使得它成为了一个不可缺少的前端工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78167