需求
- 每次打包时，把项目所有的JS及CSS进行hash
- 替换HTML中JS及CSS
- 把源码和打包好的文件区分开
目的把
<script src="./js/common.js"></script>
<link rel="stylesheet" type="text/css" href="./css/index.css">
改成
<script src="./js/common-e419711884.js"></script>
<link rel="stylesheet" type="text/css" href="./css/index-07a771d68f.css">
原目录
project
└── src
│── css /
│── font /
│── images /
│── js /
│── json /
│── favicon.ico
│── *.html
最终目录
project
└── dist
│── css /
│── font /
│── images /
│── js /
│── json /
│── favicon.ico
│── *.html
└── dev
└── src
│── css /
│── font /
│── images /
│── js /
│── json /
│── favicon.ico
│── *.html
.gitignore
gulpfile.js
package.json
1.安装Gulp及其他插件
npm install --save-dev gulp
npm install --save-dev gulp-rev
npm install --save-dev gulp-clean
npm install --save-dev gulp-rev-collector
gulpfile.js里面用的gulp@4的写法，安装的时候可以npm install --save-dev gulp@4
2.给项目创建一个gulpfile.js文件，编写
// 给js,css添加版本号
gulp.task('revcss', () => {
return gulp.src('src/css/*.css')
.pipe(rev())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/css'))
})
gulp.task('revjs', () => {
return gulp.src('src/js/*.js')
.pipe(rev())
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest())
.pipe(gulp.dest('rev/js'))
})
// 替换html里的版本号
gulp.task('rev-collector', () => {
return gulp.src(['rev/**/*.json', 'src/**/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest('dist'))
})
// 清空dist
gulp.task('clean', () => {
return gulp.src('dist', {read: false, allowEmpty: true}).pipe(clean());
})
// 复制项目中其他需要的文件
gulp.task('copy', () => {
return gulp.src(['src/font/**', 'src/images/**','src/json/**', 'src/*.ico'], { base: './src/' })
.pipe(gulp.dest('dist'))
})
gulp.task('default', gulp.series('clean', 'copy', 'revcss', 'revjs', 'rev-collector'))
3.控制台执行gulp，打包
gulp
这里选用的是增量发布的形式，如需要改成这种形式
<link rel="stylesheet" href="./css/index.css?v=07a771d68f">
可以参考
