简而言之，普通子任务是构建任务的核心，包含了所有的构建逻辑。综合子任务是基于gulp普通子任务的一个自定义套餐。通过拼凑普通子任务来实现综合子任务的功能。

　　default任务

　　默认任务，直接在命令行中运行gulp就会执行该命令了。

　　clean任务

　　清理任务，好奇心并没有频繁的清理图片，读者可以根据具体情况决定要不要清理图片。

　　build任务

　　build任务，适用于production模式。为了保证代码一致性，建议统一放到跳板机上执行。其中sequence是为了让控制任务的执行顺序。

　　watch任务

　　监听任务，适用于开发模式。监听文件的变化，并触发指定子任务，增量更新。

　　怎么管理多项目？

　　抽离配置信息

　　配置信息主要包括要处理的文件，处理之后输出到什么目录。

　　那么抽离出配置信息有什么用呢？是为了让构建任务和项目解耦，从而让构建任务更灵活，复用性更好。

　　关于gulp输入流的各种正则，可以查看官方文档。

　　为了实现对多项目的支持，我们抽离了多个配置文件，每个配置文件对应一个单独的项目，见下图：

多个配置文件

　　用npm统一项目命令

　　虽然通过多个配置文件，我们可以实现对多项目的支持，但是每次运行代码的时候，还得传参区分当前运行的项目，比如gulp watch --web，还挺麻烦的。

　　为了解决上面的问题，我们可以通过npm来对gulp命令做一层封装。只需要运行简单命令即可：开发模式：npm run watch、清除构建输出：npm run clean、本地build：npm run build

　　来个总结？

　　本文从如何设计一套基于gulp & webpack的构建系统出发，展示了好奇心日报项目中的具体方案和一些思路：

不要将任务逻辑全部写到appfe/gulpfile.js文件中，它只需简单的引入全部子任务文件即可。

将所有的子任务文件保存到appfe/gulp目录，并且每个子任务采用就近原则维护代码，即相关逻辑的任全部放到一个文件中。

子任务分为两种，普通子任务包含构建任务的核心逻辑，综合子任务是基于普通子任务的自定义套餐。

抽离工具函数到单独的文件夹，便于复用。比如时间格式化，webpack日志美化，错误处理等。

抽离项目配置信息到单独的文件，让构建任务和项目解耦。

使用npm封装gulp命令，让命令变得更简单可用。

　　延伸阅读

　　每次项目配置总是最麻烦的，大家可以根据在团队中做一个脚手架，只要约定好前端目录，这个配置就能节省不少的时间