简介
随着前端技术的快速发展，现代化工作流成为了前端工作中必不可少的一部分。而 Gulp 作为前端自动化构建工具，扮演着特殊的角色。@beisen/gulp-lib 就是一个为了协助前端工程师进行 Gulp 构建的 npm 包，它提供了一些内部封装好的基本任务流。
本篇文章将介绍如何使用 @beisen/gulp-lib 来协助我们进行 Gulp 构建。
安装
在使用 @beisen/gulp-lib 前，首先需要进行安装：
--- ------- ---------------- ----------
安装完成后，在工作目录下创建一个 Gulpfile.js 文件。
使用
引入 gulp 和 @beisen/gulp-lib：
----- ---- - ---------------- ----- ---------- - ----------------------------
beisenGulp 提供了默认的任务，可通过如下方式启动：
------------------ --------------------
任务中默认包含如下任务流：
- 清理构建目录
- 编译 JavaScript
- 编译 Sass
- 复制图像文件
- 压缩 CSS 和 JavaScript 文件
如需添加自定义任务流，可传入 options 对象来配置。如下为默认配置：
----- ------- - - ----------- --- -- ----- ----------- --- -- ---- --------- --- -- ---- ---- ------- --- -- ---------- ---- -------- --- -- ------ ---------- ------ -- -------- ------- ----- -- ---- --- - ---------- -- ----------- ----- -- ---- ---------- -- ------ ----- -- ---- ----- -- ---------- ------------ ----- -- ---- ------------ --------- ------- ---- -- ------------- -- ------------------ ---------------------
编译 Sass
默认情况下，gulp-sass 会将 Sass 编译成未压缩的 CSS 文件，可通过传入 options 对象的 minify 参数为 true 来进行 CSS 压缩。
编译 JavaScript
默认情况下，@babel/preset-env 被使用来编译 ECMAScript 6+ 语法。同时，babel-loader 被用于 Webpack 打包。也可自定义 Babel 配置，详见 @babel/preset-env 文档。
浏览器实时预览
Browser-Sync 能在多个浏览器中同步滚动和输入。此外，文件改动时，自动刷新浏览器。为了开启浏览器实时预览，只需将 browsersync 选项设置为 true。
----- ------- - - ------------ ---- -- ------------------ ---------------------
示例代码
----- ---- - ---------------- ----- ---------- - ---------------------------- ----- ------- - - ----------- ------ -- ----- ----------- ------- -- ---- --------- ----------------------- -- ---- ---- ------- ------------------- -- ---------- ---- -------- --------------------------- -- ------ ---------- ----- -- -------- ------- ----- -- ---- --- - ---------- -- ----------- ----- -- ---- ---------- -- ------ ------ -- ---- ----- -- ---------- ------------ ----- -- ---- ------------ --------- ------- ---- -- ------------- -- ------------------ ---------------------
总结
通过使用 @beisen/gulp-lib，我们可以减少很多样板代码，可将更大的精力放在实际的业务逻辑上，提高开发效率。除了默认任务之外，我们还可以自定义任务并将其集成到项目之中。同时，我们也可在已有的任务流基础上，再增加相关的操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedabe8b5cbfe1ea06108c9