一. 最后实现的效果如下:
<script type="text/javascript" src="resource/js/jquery-3-a46fb81762.3.1.min.js"></script> <script type="text/javascript" src="resource/js/javascript-a24740cd73.js"></script> <script type="text/javascript" src="resource/js/detailsPage-7dfc17b306.js"></script>
二.安装
npm install –g gulp npm install gulp gulp-rev run-sequence gulp-rev-collector --save-dev
三.目录下创建gulpfile.js,内容如下:
var gulp = require('gulp'), runSequence = require('run-sequence'), rev = require('gulp-rev'), revCollector = require('gulp-rev-collector') gulp.task('script',function(){ gulp.src('resource/js/*.js') .pipe(rev()) .pipe(gulp.dest('./View/resource/js')) .pipe(rev.manifest()) .pipe(gulp.dest('./View/resource/js')); }); gulp.task('style',function(){ gulp.src('resource/css/*.css') .pipe(rev()) .pipe(gulp.dest('./View/resource/css')) .pipe(rev.manifest()) .pipe(gulp.dest('./View/resource/css')); }); gulp.task('revHtmlJs', function () { return gulp.src(['./View/resource/js/*.json', './*.html']) .pipe(revCollector()) .pipe(gulp.dest('./dist')); }); gulp.task('revHtmlCss', function () { return gulp.src(['./View/resource/css/*.json', './dist/*.html']) .pipe(revCollector()) //替换html中对应的记录 .pipe(gulp.dest('./View')); //输出到该文件夹中 }); //开发构建 gulp.task('dev', function (done) { condition = true; //依次顺序执行 runSequence( ['script'], ['style'], ['revHtmlJs'], ['revHtmlCss'], done); });
四. 执行gulp dev就可以了
如果想生成加版本号的 例如下面效果:
"/css/style.css" => "/dist/css/style.css?v=1d87bebe" "/js/script1.js" => "/dist/script1.js?v=61e0be79" "cdn/image.gif" => "//cdn8.example.dot/img/image.gif?v=35c3af8134"
可修改一下文件:
1. 打开node_modules\gulp-rev\index.js
第133行 manifest[originalFile] = revisionedFile; 更新为: manifest[originalFile] = originalFile + '?v=' + file.revHash;
2.打开node_modules\gulp-rev\node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext; 更新为: return filename + ext;3.打开node_modules\gulp-rev-collector\index.js
第40行 var cleanReplacement = path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ); 更新为 var cleanReplacement = path.basename(json[key]).split('?')[0];更改后在执行gulp dev 就可以了!