test markdown 编辑器 editormd - 十七度

不知道各位同学在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-revnodemodulesrev-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，运行命令