简介
在 Web 开发中，资源打包和压缩是非常常见的操作，常见的工具有 webpack、gulp、grunt 等等。其中，webpack 是非常流行的打包工具，这篇文章将介绍一款基于 broccoli 的打包工具 —— broccoli-bundle-assets。
broccoli-bundle-assets 是一个 webpack 风格的打包工具，它遵循约定大于配置的原则，只要按照一定的目录结构来组织资源，就可以自动打包并输出到指定的目录。
安装
执行以下命令来安装 broccoli-bundle-assets：
npm install broccoli-bundle-assets --save-dev
使用方法
broccoli-bundle-assets 的使用非常简单，只需要指定需要打包的资源目录和输出目录即可，下面是一个示例：
-- -------------------- ---- -------
-- ------------
-------------- - --------------- -
-------------------------------------
------------------
--------- -
----- -
----- -------
------- ---------- -
--- ------------ - ----------------------------------
------ --- -------------------------- -
--------------- --------------
-------- -
---- -
------ ---------- -----------
-
-
---
-
-
-
---
--以上配置会将 src/assets 目录下的 app.js 和 app.scss 自动打包并输出到 dist/assets.json 中，如果有其他的入口文件，只需要添加到 bundles 对象中即可，例如：
bundles: {
app: {
entry: ['app.js', 'app.scss']
},
vendors: {
entry: ['jquery.js', 'underscore.js']
}
}这样，vendors.js 和 vendors.css 会被打包并输出到 assets.json 中。
深度学习
broccoli-bundle-assets 的原理就是利用 broccoli 对目录结构进行处理，将入口文件打包成一个或多个 bundle，并输出到指定的文件中。它也是一个社区开发的工具，基于约定大于配置的原则，在使用过程中需要遵循一定的规范。
打包工具的本质是对文件进行处理，因此打包工具的设计考虑了文件的特性。在使用 broccoli-bundle-assets 时，需要对资源进行分类，对于 css、js 等不同类型的文件，需要采用不同的打包方式。
指导意义
在实际项目开发中，资源的打包和压缩是必不可少的环节，webpack 和 gulp 等工具已经成为了前端工程师的标配技能。而 broccoli-bundle-assets 的出现，为那些喜欢约定大于配置的程序员提供了一个选择，这也体现了开发者创新和实践的精神。在学习和使用此工具的过程中，不仅可以加深对于文件打包和处理的理解，也可以对 broccoli 的使用有更深入的掌握。总之，学习和使用打包工具是不可或缺的前端开发技能，而 broccoli-bundle-assets 的出现，则为前端开发者提供了更多的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8accdc64669dde528a