• 前端开发
  • markdown编辑器,gulp为html页面添加版本号,在内容更新之后

saonian saonian 16/11/29 15:52 Edited 1504浏览

不知道各位同学在web开发中是否遇到这样的困扰

在我们更新了JS和CSS等文件后,由于谷歌浏览器的缓存(其他浏览器应该也是这尿性),导致服务器上的JS,CSS文件不能及时更新.

这时我的做法右键查看网页源代码,打开相应的JS,CSS文件,然后刷新,这样就能更新代码,但是这样很影响用户体验,我们总不能每次更新脚本后告诉用户这样去刷新。

怎么解决这个问题呢,曾经想过用php获取svn当前的版本号,然后追加到js后边。类似这样index.js?v=,但是实际操作有些麻烦,而且感觉不太专业。

遂google解决方案,下面就请出今天的主角。gulp

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript(或者 CoffeeScript )源码来实现的。

使用教程:
使用前准备确认你的环境中有node 和npm

node -v      
npm -v      

1,下载安装

npm install --global gulp      
npm install --save-dev gulp      

意思就是全局安装,这样能避免我们运行gulp命令时提示command not found的错误,

确认下安装完成了

gulp -v      

如果显示版本号,没有提示命令未找到,就可以继续往下了
2,安装相关插件

npm install gulp-connect      
npm install run-sequence      
npm install gulp-rev      
npm install gulp-rev-collector      
npm install gulp-util      

注:我安装到了项目的同级目录,后面的操作请注意路径问题
等上述命令执行完之后,在项目同级目录下应该会生成node_modules文件夹,里面即是安装的gulp的插件
3,确认无误后,我们需要新建一个名字叫gulpfile.js的脚本
附上我的文件内容,仅供参考,注意路径问题!!!

//引入gulp和gulp插件      
var gulp = require('gulp'),      
    runSequence = require('run-sequence'),      
    //minifycss = require('gulp-minify-css'),压缩css需要的插件,感兴趣的可以下载      
    //uglify = require('gulp-uglify'),压缩js需要的插件,感兴趣的可以下载      
    rev = require('gulp-rev'),      
    revCollector = require('gulp-rev-collector');      

//定义css、js源文件路径。这里填写自己真实的路径      
var cssSrc = 'yourproject/Public/css/*.css',      
    jsSrc = 'yourproject/Public/js/*.js';      

//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射      
gulp.task('revCss', function(){      
    return gulp.src(cssSrc)      
        .pipe(rev())      
        .pipe(rev.manifest())      
        //.pipe(minifycss())   //压缩css,需要新的插件,下载速度太慢,我放弃了      
        .pipe(gulp.dest('rev/css'));      
});      

//js生成文件hash编码并生成 rev-manifest.json文件名对照映射      
gulp.task('revJs', function(){      
    return gulp.src(jsSrc)      
        .pipe(rev())      
        .pipe(rev.manifest())      
        //.pipe(uglify())    ////压缩JS,需要新的插件,下载速度太慢,我放弃了      
        .pipe(gulp.dest('rev/js'));      
});      

//Html替换css、js文件版本      
gulp.task('revHtml', function () {      
    return gulp.src(['rev/**/*.json', 'yourproject/Application/**/View/**/*.html'])//填写自己的真实模板存放位置      
        .pipe(revCollector())      
        .pipe(gulp.dest('yourproject/Application'));      
});      

//task合并顺序执行      
gulp.task('dev', function (done) {      
    condition = false;      
    runSequence(      
        ['revCss'],      
        ['revJs'],      
        ['revHtml'],      
        done);      
});      

gulp.task('default', ['dev']);      

这个文件我的理解就是建立一个任务,监视js,css,文件内容是否改变
4,接下来修改相关插件

打开node_modulesgulp-revindex.js第144行       
manifest[originalFile] = revisionedFile;      
更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;      

打开nodemodulesgulp-rev  
odemodules  
ev-pathindex.js      
10行 return filename + '-' + hash + ext;      
更新为: return filename + ext;      

打开node_modulesgulp-rev-collectorindex.js      
31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==  path.basename(key) ) {更新为: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {//每次覆盖版本信息      
打开node_modulesgulp-rev-collectorindex.js      
第107行 regexp: new RegExp( '([/\\'"])' + pattern, 'g' ),      
更新为: regexp: new RegExp( '([/\\'"])' + pattern+'(\?v=\w{10})?', 'g' ),      

大致意思就是更改gulp默认的规则,在js,css文件后面追加?v=xxxx

到这里如果没什么问题的话,全部步骤就已经完成了。其中需要注意的就是gulpfile.js中的路径问题.
5,运行命令

gulp dev      

如果没什么问题的话,就能实现下边的效果
before

before

before
——————————-在dologin.js内容改变后—————————————
after

after


至此结束 2016-11-30 01:08:52 星期三

zousaisai zousaisai 16/11/29 19:33

谢谢喽

saonian zousaisai : 我在开着暖气的房间里给你回复
16/11/29 19:38 回复
  • #1
  • (4) (0)
zousaisai zousaisai 16/11/29 19:34

我在北方的炕头上静静地看博主更新

saonian zousaisai : 你好逗,妹子。
16/11/29 19:36 回复
  • #2
  • (3) (0)
saonian saonian 16/11/29 19:46

@zousaisai 我不是博主,这不是个人博客,这是社区。

  • #7
  • (2) (0)
saonian saonian 16/11/29 19:38

@zousaisai 我在开着暖气的房间里给你回复

  • #6
  • (2) (0)
saonian saonian 16/11/29 19:36

@zousaisai 你好逗,妹子。

  • #5
  • (2) (0)
zousaisai zousaisai 16/11/29 19:32

谢谢博主的辛苦整理

saonian zousaisai : 我不是博主,这不是个人博客,这是社区。
16/11/29 19:46 回复
saonian : 回复2楼: 八百标兵奔北坡
16/12/15 22:27 回复
  • #4
  • (2) (0)
zousaisai zousaisai 16/11/29 19:32

有阅读价值

  • #3
  • (2) (0)
zousaisai zousaisai 16/12/15 23:07

@saonian 咦,咋那么多人哩

  • #11
  • (0) (0)
zousaisai zousaisai 16/12/15 23:06

回复8楼: 北坡说,咦,哪那么多人

  • #10
  • (0) (0)
saonian saonian 16/12/15 22:27

回复2楼: 八百标兵奔北坡

zousaisai : 回复8楼: 北坡说,咦,哪那么多人
16/12/15 23:06 回复
  • #8
  • (0) (0)

人过留名 雁过留声

saonian

all or nothing, now or never.

话题
回复
粉丝