I have implemented the gulp-rev module to re-vision static assets in my source files. It generates new file names for CSS, JS, and HTML files by appending a hash code to it.
Before : app.js
After : app-2cba45c.js
The issue I am facing is that in my AngularJS code and HTML pages, I have referenced other HTML files using their actual names. How can I manage this while using gulp-rev?
For Example:
HTML Code:
<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 Code:
In $routeProvider:
.when('/head',
{
templateUrl: 'views/Header.html', // how to handle this
// This didn't work
// templateUrl: 'views/Header*.html',
controller: 'HeaderController'
})
Gulp Code:
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'));
});