在前端开发中，使用构建工具进行自动化构建是非常重要的，其中通过使用 npm 包 raw-brunch 可以方便地将 SCSS、CoffeeScript、TypeScript 等文件编译成相应的 css、js 文件。本文将详细介绍如何使用 raw-brunch。
安装
使用 npm 安装 raw-brunch 十分简单，在终端中执行以下命令即可：
npm install raw-brunch --save-dev
配置
安装完成后，需要进行配置。在项目的根目录下创建一个 brunch-config.js 的文件，配置如下：
-- -------------------- ---- -------
-------------- - -
------ -
------------ -
------- --------
--
------------ -
------- ---------
-
--
------------ -
------- -----------
--
------ -
-------- --------
------- ---------
--
-------- -
------ - -------- ---------- --
---- - ----------- ------ -
--
---- -
-------- -
-- ---------
------- --------
-
-
--上述配置中，我们将 javascripts 和 stylesheets 目录下的文件分别合并成 app.js 和 app.css 文件。其中 assets 目录用来存放图片、字体等静态资源。
paths 配置了需要监控的文件夹和编译后生成的文件输出路径。plugins 配置了 Babel 和 raw-brunch，其中的 raw-brunch 主要用来编译 md 文件。
npm 全局变量的配置与全局 jQuery 的引用无关，可以进行一些常用 npm 包的引用声明。
编写 md 文件
在项目中创建一个名为 test.md 的文件。在该文件中，可以书写 Markdown 格式的文本，例如：
# Hello world! 这是一段 **Markdown** 文本。 - 列表1 - 列表2 > 引用内容
编译
完成上述配置和 md 文件编写后，执行以下命令进行编译：
npx brunch build
编译成功后，可以在 public 目录下找到编译生成的 app.css 和 app.js 文件，以及 test.md 文件经过编译后生成的 test.md.js 文件。
在 HTML 中引用
完成编译后，在 HTML 中引用 app.css、app.js 和 test.md.js 即可。例如：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- - ---------- ------------ ----- -------------- ----------------- ------- ------ --------- ----------- ------- ---------------------- ------- -------------------------- ------- -------
代码示例
在 app 目录下创建一个 index.coffee 文件，内容如下：
console.log 'Hello world!'
在 stylesheets 目录下创建一个 app.scss 文件，内容如下：
$primary-color: #f00;
h1 {
color: $primary-color;
}在 test.md 文件中，书写以上文本内容。
总结
通过使用 raw-brunch，可以方便地将 md 文件编译成 js 文件，轻松实现文本的显示。同时，raw-brunch 还可以处理其他文件格式，例如各种 CSS 预处理器、JS 预处理器、CoffeeScript、TypeScript 等。
虽然 raw-brunch 的功能有限，但它确实可以解决一些特定的问题，为前端开发带来更多便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b781e8991b448d4bf8