gardr-builder 是一个基于 npm 的前端构建工具，它能够帮助开发者快速构建和发布可复用的前端组件。本篇文章将介绍 gardr-builder 的使用方法和注意事项，并提供具体的示例代码，帮助读者快速掌握这一工具。
安装和初始化
首先，在使用 gardr-builder 之前，你需要先安装 Node.js 和 npm。安装完成后，你可以通过以下命令全局安装 gardr-builder：
npm install -g gardr-builder
安装完成后，你可以在需要构建的项目目录下使用以下命令初始化 gardr-builder：
gardr init该命令将创建一个名为 gardr.json 的文件，并在其中设置一些基本配置，如下所示：
{ "base": "", "src": "src", "dist": "dist", "modules": {}, "dependencies": {} }
base表示你的组件库所在的基本路径，默认为空。src表示项目源码路径，默认为src。dist表示项目构建输出路径，默认为dist。modules表示项目中的模块列表，每个模块分别对应一个目录，并定义了该目录下文件的构建方式。dependencies表示项目依赖的外部模块，如 jQuery 或 Bootstrap。
构建任务
构建任务是 gardr-builder 的核心功能，它定义了一个模块的构建方式和输出规则。一个构建任务可以包含多个输入文件和多个输出文件。在 gardr.json 文件中，你可以定义多个构建任务，并在使用时通过任务名来指定需要构建的模块。下面是一个示例：
-- -------------------- ---- ------- - ------- --- ------ ------ ------- ------- ---------- - --------------- - -------- - ------------------ ------------------ -- --------- - ---------------------- ---------------------- -- -------- - --------- -------- - - -- --------------- - --------- ------- - -展开代码
在该示例中，我们定义了一个名为 my-component 的模块，并指定其源文件和输出文件的文件名和路径。我们还定义了该模块的构建任务列表，包括 concat 和 minify 两个任务。其中，concat 任务会将所有输入文件合并成一个文件，minify 任务会将该文件进行压缩。
构建命令
在设置好构建任务后，你就可以使用 gardr-builder 来执行构建命令，将源代码转换成可用的组件库。下面的命令将构建所有定义的模块：
gardr build如果你只希望构建单个模块，可以使用以下命令：
gardr build my-component
该命令会构建名为 my-component 的模块，并将输出文件保存到 dist/my-component 目录下。
小结
gardr-builder 是一个非常强大的前端构建工具，它能够帮助你快速构建和发布可复用的前端组件。在本文中，我们介绍了 gardr-builder 的安装、初始化、构建任务和构建命令等相关内容，希望能够对读者在开发过程中有所帮助。
示例代码
以下是一个示例的 gardr.json 配置文件：
-- -------------------- ---- ------- - ------- --- ------ ------ ------- ------- ---------- - --------------- - -------- - ------------------ ------------------ -- --------- - ---------------------- ---------------------- -- -------- - --------- -------- - - -- --------------- - --------- ------- - -展开代码
其中，源代码为：
(function ($) { $.fn.myComponent = function () { $(this).css("color", "red"); }; })(jQuery);
.my-component { color: blue; }
当执行 gardr build my-component 命令时，将生成 dist/my-component.min.js 和 dist/my-component.min.css 两个文件，压缩后的 my-component.js 文件内容为：
!function(n){n.fn.myComponent=function(){n(this).css("color","red")}}(jQuery);
压缩后的 my-component.css 文件内容为：
.my-component{color:blue}
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71986
