当项目越来越庞大的时候，gulpfile.js 文件可能也会变得很庞大，上千行的代码，各种任务纵横交错，看得眼花缭乱。这个时候，应该考虑一下重构 gulpfile.js 文件。重构的关键字--拆分。
我的 gulp 的版本是 4.0.2，参考了网上很多这方面的博文，发现好多都不适用，基本都是以 3.0 为基础的。磕磕碰碰，终于成功做了一个小例子。
0、先安装需要的 gulp 插件。
npm install require-dir --save
1、构建文件结构。tasks文件夹就是一个个拆分出来的任务的集合。
gulpfile.jstasks/├── sayGoodbye.js├── sayHello.js└── gulp.config.js
2、gulpfile.js 文件
var gulp = require('gulp');var requireDir = require('require-dir');var taskList = requireDir('./tasks');// 引入配置文件var config = require('./tasks/gulp.config')();// 加载任务if (taskList) {for (var key in taskList) {var task = taskList[key];task(gulp, config); // gulp, config为入参，传给其他任务，避免其他任务文件重复定义}}gulp.task('default', gulp.series('sayHello', 'sayGoodbye', function (done) {done();}));
3、gulp.config.js 是配置文件，系统环境配置等信息可以配置到这个文件里面。非必须，如果不喜欢抽象出来，可以直接在
gulpfile.js 文件声明。
module.exports = function () {return {enviroment: 'DEV',user: 'phoebe.huang',xxx: 'xxx'}}
4、任务文件。
module.exports = function (gulp, config) {gulp.task('sayHello', function (done) {console.log('Hello, I am phoebe!', config);done();});};
如果觉得《重构gulpfile.js--基于gulp 4.0》对你有帮助，请点赞、收藏，并留下你的观点哦！
