gulp 添加版本号

先上包文件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的版本号，无法添加上

猜你喜欢