使用Gulp+Webpack

首先安装gulp require-dir

npm i -D gulp require-dir
在根目录新建文件 gulpfile.js

image.png

其中requireDir(传入的目录是gulp要读取的文件目录)

gulp

这里gulp目录里每个js文件就是一个gulp任务
gulp会读取所以js里定义的gulp任务名,与 default 任务为入口

default 任务

主要是用来整个任务, 整个流程就是
清除 => (编译, 这里用webpack做处理) => 文件压缩 =>启动服务器 => 监听文件 (改动文件时实时刷新)

default

clean任务

主要是清除已经打包生成的文件, 这里使用 del 模板, 如果要在管道中删除的话可以使用 vinyl-paths
其中 callback 用于解决异步操作问题, '!build/favicon.ico' 取反不会被删除

clean

文件压缩, 主要是 js, css以及图片

对js文件进行压缩时,如果js文件中具有ES6语法, 要先编译然后再压缩;

mini:js mini:css mini:image

webpack

将 webpack 当成 gulp 的一个任务,对它进行操作

webpack compileLogger.js

server

建立本地服务器,导出reload以便在其他文件中实现浏览器刷新

server

reload

用于刷新

reload

watcher

监听

watcher

感觉这种方法不是正确的使用 Gulp + Webpack 的开发方式.
应该 Webpack 只负责 js 的打包, 其他的都交给 Gulp.
后面思考一下如何实现.