javascriptangularjsgulpgulp-rev

AngularJS, Gulp Static asset revisioning


I'm using gulp-rev module for static asset re-visioning of my source files and it generates all files - CSS, JS and HTML with new file names appending the hash code in it.

Before : app.js  
After  : app-2cba45c.js  

But in my AngularJS code and HTML pages I referred to other HTML with the actual names, how do I handle this when I use 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'));

});

Solution

  • Thanks @lzagkaretos for the help.

    Using gulp-rev-replace solved my problem.

    Gulp code:

    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'));
    });