How do you use gulp-angular-templatecache with gulp-usemin

632 views Asked by At

I want to add the templates as a JS cache in the same way you add your js using use-min. The problem is that use-min doesn't allow to add arbitrary content in the use-min steps out of the box.

1

There are 1 answers

2
Pylinux On

The 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>

* (the reason for the placeholder is that it seems like use-min reads the input files and not the output files to determine type)

The gulp task:

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