angularjs - 你如何使用 gulp-angular-templatecache 和 gulp-usemin

Question

我想将模板添加为 JS 缓存，就像使用 use-min 添加 js 一样。问题是 use-min 不允许在开箱即用的 use-min 步骤中添加任意内容。

Answer 1

html:

<!-- build:jslib assets/js/lib.js -->
<script src="bower_components/bower-stuff/some.js"></script>
<!-- endbuild -->

<!-- build:js assets/js/app.js -->
<script src="assets/app/main.js"></script>
<script src="assets/app/config.js"></script>
<script src="assets/app/routes.js"></script>
<!-- endbuild -->

<!-- build:templateCache assets/js/templateCache.js -->
<script src="assets/app/templateCachePlaceholder.js"></script>
<!-- endbuild -->
</body>
</html>

*(占位符的原因是 use-min 似乎读取输入文件而不是输出文件来确定类型)

gulp 任务:

gulp.task('build', ['bower', 'compass'], function () {
    return gulp.src(
        [
            'frontend-src/index.html',
            'frontend-src/config/**/*',
            'frontend-src/assets/img/**/*',
            'frontend-src/assets/fonts/**/*',
            'frontend-src/assets/translations/*'
        ],
        {base: 'frontend-src/'})
        .pipe(plugins.if(isIndexHtml, plugins.usemin({
            js: [plugins.ngAnnotate(), plugins.uglify(), plugins.rev()],
            jslib: [plugins.rev()],
            css: [plugins.minifyCss(), 'concat', plugins.rev()],
            templateCache: [
                plugins.addSrc('frontend-src/assets/app/**/*.html'),
                plugins.angularTemplatecache({
                    module: ANGULARJS_MODULE_NAME,
                    root: 'assets/app/'
                }),
                'concat',
                plugins.rev()
            ]
        })))
        .pipe(gulp.dest('frontend-prod/'));

    function isIndexHtml (file) {
        return file.path.match('index\\.html$');
    }
});