markdown编辑器，gulp为html页面添加版本号，在内容更新之后 - 十七度

不知道各位同学在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( '([/\\'&quot;])' + pattern, 'g' ),      
更新为: regexp: new RegExp( '([/\\'&quot;])' + pattern+'(\?v=\w{10})?', 'g' ),

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

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