虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了。因此,我写了这个比较简单的构建方案。本文基于 gulp 最新的 4.0.2 版本进行了修改。现在前端组件化项目大多是基于 webpack 进行构建,但是有一个零散的小业务,静态页面之类的,使用 gulp 反而会更加简单方便。
如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件
这个方案主要是为了实现es6转es5、js/css的压缩合并、自动添加版本号和压缩html。
- gulp-babel es6转es5
- gulp-csso 压缩优化css
- gulp-uglify 压缩js
- gulp-htmlmin 压缩html
- gulp-filter 过滤文件
- gulp-rev-all 生成版本号
主要通过上面插件实现功能,其他插件配合使用。
安装相关依赖:npm i gulp gulp-uglify gulp-htmlmin gulp-useref gulp-csso gulp-filter gulp-rev-all gulp-base64 gulp-autoprefixer del gulp-babel @babel/core @babel/preset-env -D
|
|
在html中,我们需要先定义好构建块。
|
|
执行构建完成后,会生成 dist 文件夹,目录为:
|
|
构建完的index.html,我们忽略压缩的html,完成了压缩合并添加版本号等功能。
|
|