sindresorhus/gulp-rev · GitHub
jonkemp/gulp-useref · GitHub
与之配合的插件有：
jamesknelson/gulp-rev-replace · GitHub
sindresorhus/gulp-filter · GitHub
terinjokes/gulp-uglify · GitHub
ben-eb/gulp-csso · GitHub
开发时：
<html>
<head>
<!-- build:css({.tmp,src}) /assets/styles/main.css -->
<link rel="stylesheet" href="styles/one.css">
<link rel="stylesheet" href="styles/two.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js({.tmp,src}) /assets/scripts/main.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>
构建后：
<html>
<head>
<link rel="stylesheet" href="/assets/styles/main-b8e5904e.css">
</head>
<body>
<script src="/assets/scripts/main-912c3511.js"></script>
</body>
</html>
构建代码：
var gulp = require('gulp')
var rev = require('gulp-rev')
var revReplace = require('gulp-rev-replace')
var useref = require('gulp-useref')
var filter = require('gulp-filter')
var uglify = require('gulp-uglify')
var csso = require('gulp-csso')
gulp.task('index', function() {
var jsFilter = filter('**/*.js', {restore: true})
var cssFilter = filter('**/*.css', {restore: true})
var userefAssets = useref.assets()
return gulp.src('src/index.html')
.pipe(userefAssets) // 解析html中build:{type}块，将里面引用到的文件合并传过来
.pipe(jsFilter)
.pipe(uglify()) // 压缩Js
.pipe(jsFilter.restore)
.pipe(cssFilter)
.pipe(csso()) // 压缩Css
.pipe(cssFilter.restore)
.pipe(rev())// 重命名文件
.pipe(userefAssets.restore())
.pipe(useref())
.pipe(revReplace()) // 重写文件名到html
.pipe(gulp.dest('dist'))
})
说明：如上述代码运行不通过可能是插件版本问题，请参照最新官方文档自行修改。
作者：游志军
链接：http://www.zhihu.com/question/27548038/answer/37140329
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
推荐你使用两个 Grunt 插件：
cbas/grunt-rev · GitHub：生成文件的 hash，使用对应的 hash 重命名文件；
yeoman/grunt-usemin · GitHub：可与 grunt-rev 结合使用，替换 html 和 css 中的静态引用为加了 hash 之后的文件。
在 grunt-usemin 中提供了两个 grunt task，一个是 useminPrepare，允许你在 HTML 中对要合并打包的文件进行标记，可以自动生成合并的 cssmin、concat 的配置，后两者根据这些配置，合并生成所需的文件。另外一个是 usemin，这个 task，往往被使用者所忽略，不过它非常强大，就是提供了你所想要的替换功能。
在 Teambition 就是使用这两个插件来构建的。
补充：gulp 也有类似的插件，不过不知道能不能提供以上两个工具所具备的功能，你可以搜搜看。
作者：寸志
链接：http://www.zhihu.com/question/27548038/answer/37080465
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
最初最初的网页处理形式是，css有更新，网页则会自动重新调用css文件，以保证使用最新的样式。
但后来随着各大浏览器的网页缓存、服务器与CDN技术等等，即便你上传覆盖了新的css文件，那么除非用户手动刷新，否则无法正常调用最新的css。
根据你的网站项目，可以在css地址后加版本号的形式，如/style.css?v=123，每次更新手动修改版本号，实现全站自动更新css。
还有更好的方法就是，将css文件生成一个hash值，放到css文件名里，这样每次修改css，都会生成一个新名字的css。
再高级一点，涉及大型项目，如css、js的更新，就需要版本控制机制或工具来管理。
加上版本号的作用主要有二个:1.方便版本控制，比如1.1版本的样式表，可以升级为2.0版本的样式表
2.强制浏览器更新(因为http请求时，如果访问的路径不变，而客户端缓存中又有该文件时，浏览器会直接调用缓存中的文件，这样的话，即使服务端的css内容变化了，但是客户端仍然有可能显示的是旧文件，而加上新的版本号以后，浏览器会认为这是一个新的访问地址，会重新下载最新版本的文件)
