首先安装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.
后面思考一下如何实现.
