我正在使用gulp-rev
模块对我的源文件进行静态资产重新访问,并且它将生成所有文件-CSS,JS和HTML,并附上新的文件名,并将其附加在其中。
Before : app.js
After : app-2cba45c.js
但是,在我的AngularJS代码和HTML页面中,我将其转介给其他html的实际名称,当我使用gulp-rev
时,我该如何处理?
例如:
html代码:
<div class="wd pull-left colapse_border">
<ng-include src="'views/Header.html'"></ng-include> <!-- how to handle this -->
// This didn't work
<!--
<ng-include src="'views/Header*.html'"></ng-include>
-->
</div>
JS代码:
在$routeProvider
中:
.when('/head',
{
templateUrl: 'views/Header.html', // how to handle this
// This didn't work
// templateUrl: 'views/Header*.html',
controller: 'HeaderController'
})
GULP代码:
var gulp = require('gulp'),
fileSort = require('gulp-angular-filesort'),
cleanCss = require('gulp-clean-css'),
rev = require('gulp-rev');
gulp.task('appFiles', function () {
var jsFiles = gulp.src('./src/**/*.js')
.pipe(fileSort())
.pipe(rev())
.pipe(gulp.dest('./build'));
var cssFiles = gulp.src('./src/**/*.css')
.pipe(cleanCss({debug: true}))
.pipe(rev())
.pipe(gulp.dest('./build' + '/Styles/CSS'));
var htmlFiles = gulp.src(['./src/**/*.html', '!' + './src/index.html'])
.pipe(rev())
.pipe(gulp.dest('./build'));
var jsonFiles = gulp.src('./src +/**/*.json')
.pipe(rev())
.pipe(gulp.dest('./build'));
});
感谢@lzagkaretos的帮助。
使用gulp-rev-replace
解决了我的问题。
GULP代码:
var rev = require('gulp-rev'),
revReplace = require('gulp-rev-replace');
gulp.task('build', function () {
return gulp.src(['./src' + '/**/*.js', './src' + '/**/*.css', './src' + '/**/*.html', './src' + '/**/*.png', './src' + '/**/*.json', '!' + './src' + '/index.html'])
.pipe(rev())
.pipe(gulp.dest('./dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist'))
});
gulp.task("revreplace", function () {
var manifest = gulp.src("./dist/rev-manifest.json");
return gulp.src(['./dist/app/**/*.*','./dist/resources/*.*','./dist/styles/*.*'])
.pipe(revReplace({manifest: manifest}))
.pipe(gulp.dest('./build/app'));
});