前言
前端开发过程中离不开构建工具，而 gulp 是最常用的构建工具之一。gulp 本身可以直接使用，但是如果要实现更多的功能，往往需要自定义插件或者配置。随着项目变得越来越复杂，我们需要对 gulp 配置进行更好的管理和组织。这时候，gulp-configuration 这个 npm 包就能派上用场了。
gulp-configuration 可以理解为 gulp 的基础配置，能够帮助我们规范化配置文件的结构，提升复用性和扩展性。它基于配置文件进行管理，避免了 gulpfile.js 文件过于臃肿的问题，同时也可以节省我们编写任务的时间。
本篇文章将介绍使用 gulp-configuration 进行任务管理的基本用法和注意点。
安装
首先我们要在命令行中使用 npm 安装 gulp 和 gulp-configuration，如果已经在项目中安装了 gulp，可以跳过第一行。
npm install --save-dev gulp gulp-configuration
基本用法
安装好后，在项目中创建一个配置文件 gulp-config.js，并在其中声明任务及其依赖。可以参考如下的示例：
-- -------------------- ---- -------
----- - ------------ - - ------------------------------
----- ---- - ---------------------
----- ------------ - -----------------------------
-------------- - --------------
----- -----------
------ -
------- -
---- ---------------------
----- -----------
----- ----------
-------- -
-------
--------------
-
--
------ -
---- ------
-
-
---这个配置文件中定义了两个任务，一个是处理 scss 文件并加上浏览器前缀，另一个是清空 dist 目录。注意到，我们在任务 styles 中声明了其依赖任务 clean，因此在运行 styles 任务之前，会先运行 clean 任务。这在实际项目中非常有用，因为我们可能需要在打包前清空目标文件夹中的旧文件。
接下来，在 gulpfile.js 文件中引入 gulp-configuration，并声明任务。
const { createGulp } = require('gulp-configuration');
const myConfig = require('./gulp-config');
const gulp = createGulp(myConfig);
gulp.task('default', gulp.series('clean', 'styles'));在上面的代码中，我们使用 createGulp 函数将配置文件中的任务转化为 gulp 任务，再用 gulp.task 声明默认任务。这里我们声明的默认任务包含了两个子任务，分别是 clean 和 styles。
进阶用法
除了常规的任务定义，gulp-configuration 还提供了一些高级的用法。以下是一些常见的用法，供大家参考。
任务组
当你的文件结构越来越复杂时，你可能需要为一个概念性相近的任务进行分组。在 gulp-configuration 中，我们可以使用 group 来实现这个目的。示例如下：
-- -------------------- ---- -------
-------------- - --------------
----- -----------
------ -
------ -
---- ------
--
------ -
---- -----------------
----- ------------
--
------- -
---- ---------------------
----- -----------
----- ----------
-------- -
-------
--------------
-
-
--
------- -
------ --------- -------- ---------
-
---上面的代码中，我们将 clean、fonts 和 styles 三个任务都加入到了 build 组里面。而后在 gulpfile.js 文件中运行 build 任务即可同时执行这三个任务。
gulp.task('build', gulp.series('build'));环境变量
在实际开发中，我们需要根据不同的环境来定义不同的构建任务，这时可以考虑使用 gulp-configuration 的环境变量功能。接下来我们来演示一下这个功能。首先在 gulp-config.js 文件中定义两个任务，一个是普通的样式处理，另一个是针对生产环境的样式处理：
-- -------------------- ---- -------
----- - ---- ------------ - - ------------------------------
----- ---- - ---------------------
----- ------------ - ------------------------
----- ------- - -------------------
-------------- - --------------
----- -----------
------ -
------- -
---- ---------------------
----- -----------
-------- -
-------
--------------
-
--
-------------- -
---- ---------------------
----- -----------
-------- -
-------
---------------
---------
-
-
-
---注意到这里我们定义了两个任务名，分别是 styles 和 styles:prod，前者是普通的样式处理，后者是针对生产环境的处理。接下来，在 gulpfile.js 文件中引入 gulp-configuration，并根据环境变量运行对应的任务。
const { createGulp } = require('gulp-configuration');
const myConfig = require('./gulp-config.js');
const gulp = createGulp(myConfig);
const isProduction = process.env.NODE_ENV === 'production';
const taskName = isProduction ? 'styles:prod' : 'styles';
gulp.task('styles', gulp.series(taskName));这里我们使用了 process.env.NODE_ENV 定义了环境变量，并根据环境变量名来判断需要运行哪个任务。在命令行中运行任务时，我们需要设置环境变量。例如，在 Windows 系统中，可以使用如下命令：
set NODE_ENV=production && gulp styles
这里我们将环境变量设置为 production，然后运行 gulp styles 命令。
总结
本文介绍了 npm 包 gulp-configuration 的基本用法和进阶用法。使用 gulp-configuration 可以帮助我们统一规范以及提升复用性和扩展性，是一个非常强大的工具。希望通过本文的介绍，大家对它有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005567081e8991b448d3435