什么是 gulp-bro？
gulp-bro 是一个 Gulp 插件，用于把多个浏览器 JavaScript 中的 CommonJS 文件打包成一个文件。gulp-bro 底层使用了 Browserify 作为打包工具，并且能够自动编译 ES6 代码和 JSX 语法，非常适合于前端开发使用。
安装 gulp-bro
在安装 gulp-bro 之前，需要确保已经安装了 Node.js 和 Gulp。在 Node.js 官网上下载和安装 Node.js，然后在命令行中输入以下命令以安装 Gulp：
npm install --global gulp-cli
安装完成后，可以在命令行中输入以下命令来安装 gulp-bro：
npm install --save-dev gulp-bro
使用 gulp-bro
安装完成 gulp-bro 后，就可以在 Gulp 中引用该插件。以下是一个简单的 Gulpfile.js 的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
-------- ---- -
------ -----------------------
------------
-------------------------
-
--------------- ----
-------------------- -------------------在上面的示例中，我们定义了一个名为 js 的任务来打包 JavaScript 文件。代码的意思是先指定需要打包的文件路径，然后把所有文件通过 gulp-bro 编译和打包，最后生成 dist 目录下的单个 JavaScript 文件。
高级用法
自定义入口文件
如果你的项目中存在多个入口文件，你可以使用 gulp-bro 的入口文件选项来指定入口文件。以下是一个示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
-------- ---- -
------ -----------------------
-----------
-------- --------------- -----------------
---
-------------------------
-
--------------- ----
-------------------- -------------------在上面的示例中，我们使用 entries 选项指定了两个入口文件：src/main.js 和 src/another.js。gulp-bro 会把这两个文件打包成一个 JavaScript 文件。
预先加载模块
如果你的项目中依赖了其他模块，你可以使用 gulp-bro 的 require 选项来预先加载这些模块。以下是一个示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
-------- ---- -
------ -----------------------
-----------
-------- ---------- ---------
---
-------------------------
-
--------------- ----
-------------------- -------------------在上面的示例中，我们使用 require 选项指定了两个模块：jquery 和 lodash。这些模块会被预先加载，以便其他模块可以直接使用它们。
结语
以上就是 gulp-bro 的使用教程。当你熟悉了 gulp-bro 的使用后，你会发现它非常适合于前端开发的工作流程中。祝你编写愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66086