首先，为何要使用 Gulp 编译呢？在刚开始了解 Webpack 时，答主也实现过 Gulp + Webpack 的工作流，它能够工作，也可以维护，但实际上它带来的是不必要的复杂性。实际上构建系统中并没有必须使用 Gulp 的任务。在 Gulp + Webpack 的项目中，需要维护两套百行级的打包配置，这其实是不方便使用的。Gulp 的功能完全可以用 NPM Script 替代，这也是目前的趋势。你想维持已有的技术栈知识而想引入 Gulp 是可以理解的，不过这并不是必须的。

建议在理解 vue-cli 的 Webpack 配置前提下，精简其代码，实现 vue + webpack 的配置模板。答主的实践是，一个能满足中等（万行级）Vue 项目规模需求的 Webpack 模板只需要一个 config.js 就能放下，甚至不需区分 webpack.dev.js 和 webpack.prod.js 这些冗余的模块。

作为参考，这是上文中百行级的 Vue 中等规模项目模板，百行内的配置即实现了支持 HMR、预处理器、依赖提取、内联图片、CSS 提取、HTML 生成、反向代理等常见的前端工程化功能：
https://github.com/doodlewind...

这是 Gulp + Webpack 项目中的 Gulpfile 模板：
https://github.com/doodlewind...