前言
在前端开发中，构建工具是必不可少的。webpack 是较为常见的构建工具，但由于配置繁琐，不易上手。本文介绍一款基于 gulp 的构建工具 wowspg-builder，它简单易用，可快速构建项目。
安装
首先，你需要在全局安装 gulp：
npm install -g gulp
然后，在项目中安装 wowspg-builder：
npm install wowspg-builder
使用
wowspg-builder 有以下五个任务，它们分别是：
- build: 编译项目
- watch: 监听文件变化，实时编译
- browser-sync: 启动本地服务器
- clean: 删除编译出的文件
- help: 打印帮助信息
这些任务在 wowspg-builder 的配置文件 gulpfile.js 中定义，在执行 gulp 时需要传递参数来指定任务。
build
build 任务可以编译项目成品。在 gulpfile.js 中，它的定义如下：
function build(cb) {
return gulp.series(clean, gulp.parallel(css, js, img, font, html))(cb);
}可以看出，build 任务的执行需要先 clean，然后并行执行 css、js、img、font、html 五个任务。这五个任务均由 gulp 插件实现，可以在任务定义中看到对应的插件，比如 css 任务使用了 gulp-autoprefixer 插件，可以自动给 CSS 属性添加浏览器前缀。
执行 build 任务的命令是：
gulp build
watch
watch 任务可以监听项目文件变化，实时编译。在 gulpfile.js 中，它的定义如下：
function watch() {
gulp.watch(srcDir + '/css/**/*', { ignoreInitial: false }, css);
gulp.watch(srcDir + '/js/**/*', { ignoreInitial: false }, js);
gulp.watch(srcDir + '/img/**/*', { ignoreInitial: false }, img);
gulp.watch(srcDir + '/font/**/*', { ignoreInitial: false }, font);
gulp.watch(srcDir + '/html/**/*', { ignoreInitial: false }, html);
}可以看出，watch 任务使用 gulp.watch 监听指定文件夹下的文件，当文件有变化时，触发指定的任务重新编译。
执行 watch 任务的命令是：
gulp watch
browser-sync
browser-sync 任务可以启动本地服务器，支持浏览器自动刷新。在 gulpfile.js 中，它的定义如下：
-- -------------------- ---- -------
-------- ------------- -
--------------
----- -----
------- -
-------- ----------
--
------- ------
---
----------------- - -------------------- ----------------
-可以看出，browser-sync 任务使用 browser-sync 插件启动服务器，指定了端口为 8080，根目录为构建后的目录。它还实现了监听目标目录变化并触发浏览器自动刷新的功能。
执行 browser-sync 任务的命令是：
gulp browser-sync
clean
clean 任务可以删除构建出的目标文件。在 gulpfile.js 中，它的定义如下：
function clean() {
return del(destDir);
}可以看出，clean 任务简单地删除了项目目录下的 dist 目录，即构建出的目标文件所在的目录。
执行 clean 任务的命令是：
gulp clean
help
help 任务可以打印 wowspg-builder 的帮助信息。在 gulpfile.js 中，它的定义如下：
-- -------------------- ---- -------
-------- -------- -
-------------
------
---- ----- - ------
---- ----- - -----------
---- ------------ - -----------------
---- ----- - --------
---- ---- - ------
---
------ -----
-可以看出，help 任务简单地打印了 wowspg-builder 的使用方式。
执行 help 任务的命令是：
gulp help
示例代码
接下来，我们将通过一个简单的示例展示 wowspg-builder 的使用方式。
假设你在本地搭建了一个简单的服务器，目录结构如下：
root ├── css │ └── style.css ├── img │ └── favicon.ico ├── js │ └── app.js └── index.html
其中，index.html 引入了 css/style.css 和 js/app.js，浏览器访问根目录时会显示 index.html。
现在，你想要将这个项目编译成品，构建出的目录为 dist，同时启动本地服务器。
首先，你需要在项目根目录下创建 gulpfile.js，定义 wowspg-builder 的配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- -------- - --------------------------
----- ------ - -----------------------
----- -------- - -------------------------
----- ------- - ------------------------
----- --- - ---------------
----- ------- - ---------------------------------
----- ------ - -----
----- ------ - ---------
-------- ------- -
------ ------------
-
-------- ----- -
------ ----
----------- - ------------
-----------------
---------------------- - ---------
-
-------- ---- -
------ ----
----------- - -----------
---------------
---------------------- - --------
-
-------- ----- -
------ ----
----------- - ------------
-----------------
---------------------- - ---------
-
-------- ------ -
------ --------------- - ----------------------------------- - ----------
-
-------- ------ -
------ ----
----------- - --------------
----------------
-------------------------
-
-------- --------- -
------ ------------------ ------------------ --- ---- ----- -----------
-
-------- ------- -
----------------- - ------------ - -------------- ----- -- -----
----------------- - ----------- - -------------- ----- -- ----
----------------- - ------------ - -------------- ----- -- -----
----------------- - ------------- - -------------- ----- -- ------
----------------- - -------------- - -------------- ----- -- ------
-
-------- ------------- -
--------------
----- -----
------- -
-------- ---------
--
------- ------
---
----------------- - --------------------- ----------------
-
-------- -------- -
-------------
------
---- ----- - ------
---- ----- - -----------
---- ------------ - -----------------
---- ----- - --------
---- ---- - ------
---
------ -----
-
------------- - ------
------------- - ------
----------------------- - ------------
------------- - ------
------------ - -----
--------------- - ------这个配置文件中，我们使用 gulp 插件实现了编译 CSS、JS、图片、字体和 HTML 等任务，并在 build 任务中并行执行这些任务。用 watch 监听文件变化，自动编译；用 browser-sync 启动本地服务器。
接下来，执行以下命令，即可构建出 dist 目录，并启动本地服务器。
gulp build gulp browser-sync
最后，访问 http://localhost:8080，你会发现已经可以看到编译后的成果啦！
总结
wowspg-builder 简单易用，能够快速地构建出项目成品。与 webpack 相比，它的配置简单，可以更快上手。同时，它也揭示了 gulp 模块化编程的魅力，让我们的前端工程变得更加高效有条理。
希望这篇文章能够帮助你入门 wowspg-builder，并为你的前端项目构建提供便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe552