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

saonian 发布于 16-11-29 15:52 已修改 4454 点击
不知道各位同学在web开发中是否遇到这样的困扰 在我们更新了JS和CSS等文件后,由于谷歌浏览器的缓存(其他浏览器应该也是这尿性),导致服务器上的JS,CSS文件不能及时更新. 这时我的做法右键查看网页源代码,打开相应的JS,CSS文件,然后刷新,这样就能更新代码,但是这样很影响用户体验,我们总不能每次更新脚本后告诉用户这样去刷新。 怎么解决这个问题呢,曾经想过用php获取svn当前的版本号,然后追加到js后边。类似这样index.js?v=,但是实际操作有些麻烦,而且感觉不太专业。 遂google解决方案,下面就请出今天的主角。[gulp](http://www.gulpjs.com.cn/ "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](//www.shiqidu.com/ueditor/php/upload/image/20161106/1478424134520268.png) ![before](//www.shiqidu.com/ueditor/php/upload/image/20161106/1478424134520268.png) ![before](//www.shiqidu.com/ueditor/php/upload/image/20161106/1478424208241488.png) ——————————-在dologin.js内容改变后————————————— ![after](//www.shiqidu.com/ueditor/php/upload/image/20161106/1478424208241488.png ) ![after](//www.shiqidu.com/ueditor/php/upload/image/20161106/1478424208241488.png) * * * 至此结束 2016-11-30 01:08:52 星期三
11 评论

请登录后发表评论

saonian

all or nothing, now or never.

文章
回复
粉丝