关于使用gulp-rev的疑惑
来源:互联网 发布:温州国际淘宝城网站 编辑:程序博客网 时间:2024/06/06 01:42
前端发布文件后,为了防止缓存问题就有了version号,但是每次手动去修改version号又比较麻烦,所以在文件编译的时候在文件后面附带了hash值来防止缓存的问题,因为接收公司项目的时候,整个项目都是用gulp的,如果改用webpack很多东西都需要去单独修改,需要耗费大量时间,所以使用了gulp-rev插件。
在githuab上面寻找了一下,官方文档是这么写的
//安装npm install --save-dev gulp-rev//使用const gulp = require('gulp');const rev = require('gulp-rev');gulp.task('default', () => // by default, gulp would pick `assets/css` as the base, // so we need to set it explicitly: gulp.src(['assets/css/*.css', 'assets/js/*.js'], {base: 'assets'}) .pipe(gulp.dest('build/assets')) .pipe(rev()) .pipe(gulp.dest('build/assets')) .pipe(rev.manifest({ base: 'build/assets', merge: true // merge with the existing manifest if one exists })) .pipe(gulp.dest('build/assets')));
生成的manifest.json文件如下
{ "css/unicorn.css": "css/unicorn-d41d8cd98f.css", "js/unicorn.js": "js/unicorn-273c2c123f.js"}
按说照官网上面写的就可以了,多个任务都输出到同一个json文件里面,想法很美好,但是,但是,但是,重要的事情说三遍,事情不是这样子的,一般情况下小项目直接按照源代码来是可以的,but稍大点的项目就不行了,比如css和js文件需要合并压缩啊,css需要两份,一份在页面,一份在移动。。。。。。
来一段代码
gulp.task('concat' ,function() { gulp.src(appCssSrc) .pipe(concat('appcss.css')) .pipe(gulp.dest('dev/css')); gulp.src(appjsSrc) .pipe(concat('apptool.js')) .pipe(gulp.dest('dev/js')); gulp.src(['src/js/apporder.js','src/js/appsale.js']) .pipe(gulp.dest('dev/js'));});//appCssSrc和appjsSrc为项目文件的路径
在这里我把三种任务组合到了一起,然后我按照官网代码撸了一遍
gulp.task('concat' ,function() { gulp.src(appCssSrc,{base: 'dev'}) .pipe(concat('appcss.css')) .pipe(rev()) .pipe(gulp.dest('dev/css')) .pipe(rev.manifest({ merge: true })) .pipe(gulp.dest('dev')) gulp.src(appjsSrc,{base: 'dev'}) .pipe(concat('apptool.js')) .pipe(rev()) .pipe(gulp.dest('dev/js')) .pipe(rev.manifest({ base: 'dev', merge: true })) .pipe(gulp.dest('dev')) gulp.src(['src/js/apporder.js','src/js/appsale.js'],{base: 'dev'}) .pipe(rev()) .pipe(gulp.dest('dev/js')) .pipe(rev.manifest({ base: 'dev', merge: true })) .pipe(gulp.dest('dev'))});
结果根目录下多了一个json文件,如图
这明显不是咱们想要的结果吧,明明我只想要一个,为什么出来了多个呢?很遗憾,本人才疏学浅,解决不了这个疑问,如果有大神指明一下感激不尽哪!!!
所以我又开拓了一下思维,既然这样,为什么不在合并完成后再去获取合并完成的文件在进行这一步操作呢?想到做到,然后付诸实践以后发现可以,贴一下代码段
gulp.task('concat' ,function() { gulp.src(appCssSrc) .pipe(concat('appcss.css')) .pipe(gulp.dest('dev/css')) gulp.src(appjsSrc) .pipe(concat('apptool.js')) .pipe(gulp.dest('dev/js')) gulp.src(['src/js/apporder.js','src/js/appsale.js']) .pipe(gulp.dest('dev/js'))});gulp.task('rev-all',['concat'],function() { return gulp.src(['dev/css/appcss.css','dev/js/apptool.js','dev/js/apporder.js','dev/js/appsale.js']) .pipe(rev()) .pipe(gulp.dest('dev/js')) .pipe(rev.manifest('rev-index.json')) .pipe(gulp.dest('dev'));})
这样虽然可以实现自己想要的效果,但是问题又来了,rev-all确实是在concat任务执行完成以后才执行,但是可能文件还有没有被合并或者压缩完,虽然任务执行完了,但是文件还没有到位,这时候,下面的任务读取不到压缩合并完成后的文件,除非你执行二次或者中间添加一些别的任务,能把这段时间撑过去,这就是最坑的一点,我暂时还没有找到最好的方案。希望大家看到以后提提意见或建议什么的,能把这个坑给填上!!
- 关于使用gulp-rev的疑惑
- 关于使用xpath的疑惑
- 关于前端自动化gulp的入门使用
- gulp教程之gulp-rev-append
- gulp入门(15)- gulp-rev-append
- 关于教育质量的疑惑
- 关于接口的疑惑
- 关于CreateProcess的疑惑
- 关于指针的疑惑
- 关于getopt_long的疑惑
- 关于MVC的疑惑
- 关于setVisibility的疑惑
- 关于Manifest的疑惑
- 关于printf的疑惑
- 关于VM_COPYDATA的疑惑
- 关于RecyclerView的疑惑
- 关于kafka的疑惑
- 关于迭代器的疑惑
- AUI个人使用总结
- 项目开发初期流程
- tensorflow中optimizer如何实现神经网络的权重,偏移等系数的更新和梯度计算
- 廖雪峰JS教程课后习题及答案--自创
- Java中关于String类型的10个问题
- 关于使用gulp-rev的疑惑
- 查看RHEL网卡绑定模式和绑定状态
- 状态位
- 【怎样写代码】确保对象的唯一性 -- 单例模式(四):饿汉式单例类与懒汉式单例类的讨论
- 设置Activity无标题栏
- Android 获取APK编译时间
- HDU 5832A water problem 简单模拟
- listagg函数将查询列转为行
- 类文件结构