AngularJS，Gulp 静态资源修改答案

【问题标题】：AngularJS, Gulp Static asset revisioningAngularJS，Gulp 静态资源修改
【发布时间】：2017-12-07 15:57:44
【问题描述】：

我正在使用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'));

});

【问题讨论】：

你能从相关的 gulp 任务中添加一些代码吗？
完成，添加 gulp 任务。
很遗憾，我没有使用过gulp-rev。搜索一下，使用gulp-rev-replace 或gulp-rev-all 是一种常见的做法。

标签： javascript angularjs gulp gulp-rev

【解决方案1】：

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

【讨论】：