先上包文件package.json
{
"name": "myself",
"version": "1.0.0",
"description": "我自己的gulp项目的使用",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ysy",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean": "^0.4.0",
"gulp-connect": "^5.5.0",
"gulp-replace": "^1.0.0",
"gulp-rev": "^8.1.1",
"gulp-rev-append": "^0.1.8",
"gulp-rev-collector": "^1.3.1",
"gulp-rev-format": "^1.0.4",
"gulp-rev-replace": "^0.4.4"
}
}
gulpfile.js 配置文件
//引入gulp
let gulp = require('gulp');
let connect = require('gulp-connect');
let rev = require('gulp-rev');//对文件名,添加MD5后缀
let revAppend = require('gulp-rev-append');//给url,添加MD5版本号
let revCollector = require('gulp-rev-collector');//路径替换
let replace = require('gulp-replace');//地址替换
let runSequence = require('gulp-run-sequence');//同步执行包
let revFormat = require('gulp-rev-format');
let revReplace = require('gulp-rev-replace');
let clear = require('gulp-clean');
gulp.task('copy',function () {
console.log('copy新的源文件')
return gulp.src('src/**/*')
.pipe(gulp.dest('./dist'))
})
//生成版本号的清单
gulp.task('rev',function () {
console.log('版本号的生成')
return gulp.src(['./dist/css/*.css','./dist/js/*.js'])
.pipe(rev())
.pipe(revFormat({
prefix:false, // 在版本号前增加字符
suffix:false, // 在版本号后增加字符
lastExt: true
}))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist/config/'))
})
/*路径的替换*/
gulp.task('update-version',function () {
console.log('版本号的添加')
return gulp.src(['./dist/config/*.json','./dist/*.html'])
.pipe(revCollector())//根据json进行文件的替换
.pipe(gulp.dest('./dist/'))
})
//清除先前文件 --(删除文件,慎用)
gulp.task('clean',function () {
console.log('清除文件')
gulp.src(['./dist/'])
.pipe(clear());
})
//启动服务
gulp.task('service',function () {
console.log('测试这里进入没')
connect.server({
host:'0.0.0.0',
port:8080,
open:true
})
})
gulp.task('getCode',function (callback) {
runSequence(
'clean',
'copy',
'rev',
'update-version',
callback
)
});//执行getCode,依次执行清除源文件,copy新的源文件,产生新的版本号,添加版本号
gulp.task('default',['service']);
node_modules 文件修改
1. 默认配置修改
a.
路径:node_modules/gulp_rev/index.js
修改:
manifest[originalFile] = revisionedFile;//原始数据
manifest[originalFile] = revisionedFile + '?v=' + file.revHash; //修改后的数据
b.
路径: node_modules/gulp-rev-collector/index.js
修改:
var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' );//修改前
var cleanReplacement = path.basename(json[key]).split('?')[0];//修改后
c.
路径: node_modules/gulp-rev-format/index.js
修改:
if (opts.lastExt) {
// return filename + hash + extension ;//修改前 (第42行)
return filename + extension ;//修改后
}
注意: 如上配置时,在gulpfile设置gulp-rev-format中的lastExt需要设置为true
d.
路径: node_modules/gulp-rev/node_modules/rev-path/index.js
修改:
// return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);//修改前
return modifyFilename(pth, (filename, ext) => `${filename}-${ext}`);//修改后
备注: 以上修改node_modules的步骤中a/b/d三步参照了网上的一些写法;c是在a/b/d实行之后,没能成功添加版号,自行添加的
附加一个配置好了的项目地址:
https://gitee.com/WebYsy/gulp.git
myself这个文件夹
注意: 如果,文件的层级对应关系不一致,或者在统一层级,不同文件夹下,包含了,命名相同的文件,会造成部分js/css的版本号,无法添加上