gulp 自动化更新版本号

描述

利用gulp,当引入文件改动时，版本号自动更新

步骤

1. 步骤1

安装gulp-asset-rev，这是一个gulp.js的插件，通过添加内容哈希来替换文件的名称

 cnpm i gulp-asset-rev --save-dev

gulpfile.js文件配置如下所示

var gulp = require('gulp');
var assetRev = require('gulp-asset-rev');

gulp.task('update', function () {
 return gulp.src("./res/*.html")
     .pipe(assetRev())
     .pipe(gulp.dest('./dist'));
});

运行命令

gulp update

结果如下：

显然不符合预期,文件名和源文件名不一致！

2. 步骤2

针对步骤1存在的问题进行如下调整，进入到./node_modules/_gulp-asset-rev@0.0.15@gulp-asset-rev文件夹下的index.js文件

将index.js的代码进行修改…

重新运行命令 gulp update

这样就可以实现gulp自动化更新版本号了

进阶

在实际项目开发中有时候需要将多个.js文件或者.css文件合并成一个文件，如main.js或main.css。
但通过gulp-asset-rev打包的HTML文件并不会自动更新文件的引用
接下来将实现自动化更新文件的引用

1. 步骤1

配置gulp，实现js文件和css文件合并压缩方法。

var gulp = require('gulp');
var assetRev = require('gulp-asset-rev');

// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify');

// 获取 cleancss 模块（用于压缩 CSS）
var cleanCSS = require('gulp-clean-css');
//合并
var concat = require('gulp-concat');
//html 更新版本号
gulp.task('update', function () {
 return gulp.src("./res/*.html")
     .pipe(assetRev())
     .pipe(gulp.dest('./dist'));
});

// 合并压缩css
gulp.task('csscompress', function () {
      // 1. 找到文件
 return gulp.src('./res/css/*.css')
     .pipe(concat('main.css'))
      // 2. 压缩文件
     .pipe(cleanCSS())
     //     // 3. 另存压缩后的文件
     .pipe(gulp.dest('./dist/css'));
});

// 合并压缩js
gulp.task('jscompress', function () {
 return gulp.src('./res/js/*.js')
     //1. 合并文件
     .pipe(concat('main.js'))
     // 2. 压缩文件
     .pipe(uglify())
     // 3. 另存压缩后的文件
     .pipe(gulp.dest('./dist/js'));
});


// gulp本地版本需要4.0
gulp.task("hello", gulp.series('jscompress', 'csscompress','update'))

打包后可以发现HTML文件的引用并不是main.js已经main.css

2. 步骤2

修改./node_modules/_gulp-asset-rev@0.0.15@gulp-asset-rev文件夹下的index.js文件

执行gulp hello

搞定！

注意事项

** 整合的main.css和main.js在源文件中一定要有，否则将无法将其他的.css/.js文件删除**