什么是 biggulp?
biggulp 是一个前端构建工具，它基于 Gulp 进行封装，提供了很多默认处理方式，可以快速开发出前端项目。
安装 biggulp
首先，你需要在你的电脑安装 Node.js，然后在控制台中输入以下命令安装 biggulp：
npm install biggulp --save-dev
安装完成后，你需要在项目根目录下创建 gulpfile.js 文件。
使用 biggulp
下面是一个简单的 biggulp 使用示例，你只需要在 gulpfile.js 中输入以下代码即可：
-- -------------------- ---- ------- ----- ---- - ---------------- -- - ------------------- ----- - ---------------------- ------ - ----------------------- --------------------- -- -- - ----------------------- -------------- --------------- ---------------------------- ---展开代码
上述代码中，我们定义了一个任务，名称为 'build:js'，它会将 src/js/ 目录下的 *.js 文件经过 Babel 转译和 Uglify 压缩，并输出到 dist/js/ 目录下。
biggulp 的基本使用方式
biggulp 提供了目录文件读取、文件名过滤、自动化加载、多语言支持等功能，下面是一些常用的方法：
bg.src(globs [, options])
- globs: 字符串或字符串数组，指定需要读取的文件路径。
- options: 对象，可选参数，用来指定读取选项。
这个方法用来读取指定路径下的文件。如果传入的路径是目录，则会遍历目录下的所有文件，返回一个可读 Stream 对象。
bg.dest(folderPath [, options])
- folderPath: 字符串，指定目标文件夹路径。
- options: 对象，可选参数，用来指定输出选项。
这个方法指定写入路径，它会返回一个可写 Stream 对象，用来将文件写入目标文件夹中。
bg.watch(globs, tasks)
- globs: 字符串或字符串数组，指定需要监测的文件路径。
- tasks: 任务名称或任务数组，指定需要执行的任务。
这个方法用来初始化文件监测器，监测文件变化并在变化后执行指定的任务。
bg.set(name, value)
- name: 字符串，指定设置项名称。
- value: 对象或字符串，指定设置项的值。
这个方法可用来设置 biggulp 的全局配置，例如默认读取文件的编码格式、语言环境等。
biggulp 的高级使用方式
除了上述基本功能，biggulp 还提供了很多高级功能，比如文件名过滤、缓存处理、错误捕捉等特性，这些技术可以帮助你更加高效地进行前端开发。
文件名过滤
有时候我们只需要读取或处理某些文件，这时可以使用 glob 模式进行文件名过滤操作，例如：
bg.src('./src/**/*.png') .pipe(bg.dest('./dist/img'));
上述代码中，只处理 src/ 目录下的所有 .png 图片文件，并将其输出到 dist/img/ 目录下。
缓存处理
当处理大批量文件的时候，如果每次都重新读取和处理全部的文件，会产生很大的性能消耗，biggulp 通过使用 gulp-cache 和 gulp-rev-cache 两个插件，可以实现对文件的缓存处理。例如：
-- -------------------- ---- ------- ----- ----- - ---------------------- --- - -------------------- ---------------------- -- -- - -------------------------- -------------------- ------------ ----------------------------- ---展开代码
上述代码会对编译后的 CSS 文件进行缓存处理，并使用 gulp-rev 插件对文件名进行版本控制。
错误捕捉
在进行任何开发操作的时候，错误都是无法避免的，大量的错误同样会产生较大的性能消耗，biggulp 还提供了 gulp-plumber 插件来捕捉错误。例如：
-- -------------------- ---- ------- ----- ------- - ------------------------ --------------------- -- -- - ----------------------- ---------------- -------------- --------------- ---------------------------- ---展开代码
上述代码中，使用 gulp-plumber 插件可以捕捉错误并输出错误信息，大大提高了调试效率。
总结
biggulp 是一个基于 Gulp 的前端构建工具，它提供了很多默认处理方式，也方便了开发者进行自定义操作，可以快速地开发出想要的前端项目。掌握 biggulp 的使用方法，可以提高前端开发效率，并节省大量开发时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79749
