对静态资源文件 使用md5重命名，是不是用gulp 就能实现

这个插件槐哪会先扫描静态资源，然后给静态资源的文件名添加一个戳，然后再扫描html文件里的静态资源引用部分（script的src和link的href属性），然后把对应的引用文亩明悄件的文件名替换成上一步加上戳的文迅渣件名。 这个插件的好处是不需要再HTML文件里面加

记录一下用 gulp 来合并、压缩CSS以及进行 MD5命名以及替换文件中引入的CSS文件，当然这一系列 *** 作都是用基于gulp插件的，主要会用到下面的几个插件：

var concat = require('gulp-concat')//- 多个文件合并为侍带一个；var minifyCss = require('gulp-minify-css')//- 压缩CSS为一行； var rev = require('gulp-rev')//- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector')//- 路径替换

安装Gulp插件到本地项目

npm init//- 生成一个 package.json，里面是一些常规的配置信息npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev//- 安装插件到项目目录内

完成上面两步后，会在我们的项目内生成一个package.json文件以及一个node_modules目录

创建配置文件 gulpfile.js

在项目根目录内创建一个 gulpfile.js 文件(必须是这个文件名哟~)，内容就是上面几个插件的配置信息：

var gulp = require('gulp')var concat = require('gulp-concat') //- 多个文件合并为一个；var minifyCss = require('gulp-minify-css')//- 压缩CSS为一行；var rev = require('gulp-rev') //- 对文件名加MD5后缀var revCollector = require('gulp-rev-collector') //- 路径替换gulp.task('concat', function() {//- 创建一个名为 concat 的 task

gulp.src(['./css/wap_v3.1.css', './css/wap_v3.1.3.css'])//- 需要处理的css文件，放到一个字符串数组里

.pipe(concat('wap.min.css'))//- 合并后的文件名

.pipe(minifyCss()) //- 压缩处理成一行

.pipe(rev())//- 文件名加MD5后缀

.pipe(gulp.dest('./css')) //- 输出文件本地

.pipe(rev.manifest()) //- 生成一个rev-manifest.json

.pipe(gulp.dest('销昌./rev')) //- 将 rev-manifest.json 保存到 rev 目录内})

gulp.task('rev', function() {

gulp.src(['./rev/*.json', './亏谈扒application/**/header.php']) //- 读取 rev-manifest.json 文件以及需要进行css名替换的文件

.pipe(revCollector()) //- 执行文件内css名的替换

.pipe(gulp.dest('./application/'))//- 替换后的文件输出的目录})

gulp.task('default', ['concat', 'rev'])

运行结果

通过以上的配置之后，就可以开始运行 gulp 对我们的项目进行相关的 *** 作啦；

使用 gulp 命令，运行Gulp.js 构建程序

首先运行 concat 这个 task 生成一个 rev-manifest.json 文件

然后再运行 rev 这个 task 替换掉文件中引入的 css

YuanWingdeMacBook-Pro:m YuanWing$ gulp concat

[11:47:02] Using gulpfile ~/SVN/JKD/m/gulpfile.js

[11:47:03] Starting 'concat'...

[11:47:03] Finished 'concat' after 12 msYuanWingdeMacBook-Pro:m YuanWing$ gulp rev

[11:47:17] Using gulpfile ~/SVN/JKD/m/gulpfile.js

[11:47:17] Starting 'rev'...

[11:47:17] Finished 'rev' after 10 msYuanWingdeMacBook-Pro:m YuanWing$

rev-manifest.json文件内容：

{ "wap.min.css": "wap.min-c49f62a273.css"}

header.php替换前后对比：

替换前：<link rel="stylesheet" href="/css/wap.min.css" />

替换后：<link rel="stylesheet" href="/css/wap.min-c49f62a273.css" />

gulp-rev-collector进行文件路径替换是依据 rev-manifest.json 的，所以要先成生 .json 文件，然后再进行替换；

1. 严格一点的做法是用git，SVN这样的工具生成版本。粗糙一点的做法是直接重命名：

....

 gulp.src('app/*')

    .pipe(gulp.dest('app-v1.0'告芹))

....

2. 比较简单点妥当点的方法是使用gulp-rev和gulp-rev-collector搭配使用，以保证文件间引用的文件名的完整性（推荐做法）：

分两步：

给文件名加MD5后缀，（文件的名称发生改变）例：a.css  变成 a-0fsd1w45.css

把引用到该文件的其他文件的代码进行替换。例如：<link href="./a.css">需要替换为<link href="./a-0fsd1w45.css">才能准确引入汪禅。

// 下面是 插件的示例代码：

var gulp = require('gulp')

var rev = require('gulp-rev')

gulp.task('css', function () {

    return gulp.src('src/css/*.css')

        .pipe(rev())

        .pipe(gulp.dest('dist/css'))

        .pipe( rev.manifest() )

 袜陵毕       .pipe( gulp.dest( 'rev/css' ) )

})

gulp.task('scripts', function () {

    return gulp.src('src/js/*.js')

        .pipe(rev())

        .pipe(gulp.dest('dist/js'))

        .pipe( rev.manifest() )

        .pipe( gulp.dest( 'rev/js' ) )

})

...

var revCollector = require('gulp-rev-collector')

var minifyHTML   = require('gulp-minify-html')

gulp.task('rev', function () {

    return gulp.src(['rev/**/*.json', 'templates/**/*.html'])

       // 替换引用文件路径。这里面还是有坑的，多试几遍。

        .pipe( revCollector({

            replaceReved: true,

            dirReplacements: {

                'css': '/dist/css',

                '/js/': '/dist/js/',

                'cdn/': function(manifest_value) {

                    return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value

                }

            }

        }) )

        .pipe( minifyHTML({

                empty:true,

                spare:true

            }) )

        .pipe( gulp.dest('dist') )

})

---