在前端开发中，使用 Gulp 进行打包和构建是一种非常常见的方式。而 @shimo/gulp-build 则是一个为石墨文档定制的 Gulp 构建工具，其具有大量自定义的特性，很好的适配了石墨文档的前端开发环境。本文将详细介绍如何使用 @shimo/gulp-build 进行项目构建。
安装 @shimo/gulp-build
要使用 @shimo/gulp-build，需要先将其安装到项目中。在终端输入如下命令即可：
npm install @shimo/gulp-build --save-dev
安装完成后，即可在项目中进行使用。
配置 @shimo/gulp-build
为了让 @shimo/gulp-build 更好的适配项目，需要进行一些配置。具体配置项如下：
| 参数 | 类型 | 描述 |
|---|---|---|
input |
String | 源文件目录，支持 glob 语法 |
isProd |
Boolean | 是否是生产环境 |
eslint |
Boolean | 是否开启 Eslint 验证 |
plugins |
Array<function> | Gulp 插件数组 |
output |
Object | 构建后的文件目录和文件名 |
externals |
Array<String | RegExp> | 不需要进行构建的模块 |
在 gulpfile.js 中，可以按照如下方式进行配置：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----- - ----------------------------- ------------------ -- -- - ------- ------ -------------- ------- ----- ------- ----- -------- - ------------ ------------- -- ------- - ---- ------- --------- --------------- -- ---------- - --------- ---------- -- --- ---展开代码
在这个配置项中，指定了源文件的目录为 src/**/*.js，表示将 src 目录下的所有 .js 文件作为源文件进行构建。同时，指定了构建后文件的目录为 dist，文件名为 index.min.js，表示最终构建完成的文件会输出到 dist/index.min.js 文件中。
当 isProd 为 true 时，表示为生产环境的构建。同时，启用了 Eslint 验证，以保证构建出的代码质量。
plugins 中为 Gulp 插件数组，可以通过 require 引入。
对于不需要进行构建的模块，可以通过 externals 进行配置。其支持字符串、正则表达式等多种方式。
示例代码
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ----- - ----------------------------- ----- --------- - ---------------------- ----- ---------- - ----------------------- ------------------ -- -- - ------- ------ -------------- ------- ----- ------- ----- -------- - ------------ ------------- -- ------- - ---- ------- --------- --------------- -- ---------- - --------- ---------- -- --- ---展开代码
结语
本文介绍了如何使用 @shimo/gulp-build 进行项目构建。在使用过程中，需要根据项目的实际需求进行配置，以满足不同的构建需求。希望本文能对前端开发者有所启发，有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158677
