為了防止客戶端的靜態資源緩存，我們需要每次更新css或js的時候，通過md5或時間戳等方式重新命名靜態資源；
然后涉及到的html模板里的src也要做相應的修改，靜態資源需要優化(壓縮合並)
然后涉及到的html模板里的src也要做相應的修改，靜態資源需要優化(壓縮合並)
文件目錄結構
html模板文件
<html>
<head>
<!-- build:css styles/main.min.css -->
<link rel="stylesheet" href="../styles/one.css">
<link rel="stylesheet" href="../styles/two.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/main.min.js -->
<script type="text/javascript" src="../scripts/one.js"></script>
<script type="text/javascript" src="../scripts/two.js"></script>
<!-- endbuild -->
</body>
</html>
gulp配置文件:gulpfile.js
var gulp = require('gulp'),
minifyCss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
clean = require('gulp-clean'),
rev = require('gulp-rev'),
concat = require('gulp-concat'),
revReplace = require('gulp-rev-replace'),
useref = require('gulp-useref'),
revReplace = require('gulp-rev-replace'),
revCollector = require('gulp-rev-collector');
//清空文件夾，避免資源冗余
gulp.task('clean',function(){
return gulp.src('dist',{read:false}).pipe(clean());
});
//css文件壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出來
gulp.task('css',function(){
return gulp.src('app/styles/*.css')
//.pipe( concat('wap.min.css') )
.pipe(minifyCss())
.pipe(rev())
.pipe(gulp.dest('dist/app/styles/'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/css'))
});
//js文件壓縮，更改版本號，並通過rev.manifest將對應的版本號用json表示出
gulp.task('js',function(){
return gulp.src('app/scripts/*.js')
//.pipe( concat('wap.min.js') )
.pipe(jshint())
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('dist/app/scripts/'))
.pipe(rev.manifest())
.pipe(gulp.dest('dist/rev/js'))
});
//通過hash來精確定位到html模板中需要更改的部分,然后將修改成功的文件生成到指定目錄
gulp.task('rev',function(){
return gulp.src(['dist/rev/**/*.json','app/pages/*.html'])
.pipe( revCollector() )
.pipe(gulp.dest('dist/app/pages/'));
});
//合並html頁面內引用的靜態資源文件
gulp.task('html', function () {
return gulp.src('dist/app/pages/*.html')
.pipe(useref())
.pipe(rev())
.pipe(revReplace())
.pipe(gulp.dest('dist/html/'));
})
task執行順序
構建后的目錄結構
構建后的html模板文件
<html>
<head>
<!-- build:css styles/main.min.css -->
<link rel="stylesheet" href="../styles/one-970d7f6a33.css">
<link rel="stylesheet" href="../styles/two-045a666e4a.css">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/main.min.js -->
<script type="text/javascript" src="../scripts/one-d89f951793.js"></script>
<script type="text/javascript" src="../scripts/two-42f73556d2.js"></script>
<!-- endbuild -->
</body>
</html>
如果需要對頁面內引用的資源文件進行合並，這時我們可以利用:
gulp-useref ,以及gulp-rev-replace 這兩個構建工具的功能特性,然后執行gulp html 即可將index.html中引用的靜態資源文件進行合並
執行gulp html之后的目錄結構：
此時，構建后的html模板文件
<html>
<head>
<link rel="stylesheet" href="styles/main-8056000222.min.css">
</head>
<body>
<script src="scripts/main-d803fde67b.min.js"></script>
</body>
</html>