How to inject a file which is not in the HTML markup block?

[justqyx]

Hi, I use angular as my project's frontend framework. I want to use gulp-angular-templatecache to package my views into a JS file. However, I do not know how to inject the JS file in the pipe flow.

Here is my HTML markup

    <!-- build:js scripts/scripts.js -->
    <script type="text/javascript" src="scripts/app.js"></script>
    <!-- endbuild -->

Here is my gulp file's code

gulp.task('build', ['scss'], function() {
    var templatecacheStream = gulp.src(yeoman.app + '/views/**/*.html')
        .pipe($.angularTemplatecache());

    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');

    var assets = $.useref.assets({
        searchPath: [yeoman.app],
        additionalStreams: [templatecacheStream]
    });

    return gulp.src(paths.views.main)
        .pipe(assets)
        .pipe(jsFilter)
        .pipe($.ngAnnotate())
        .pipe($.uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe($.minifyCss({ cache: true }))
        .pipe(cssFilter.restore())
        .pipe($.rev())
        .pipe(assets.restore())
        .pipe($.revReplace())
        .pipe($.useref())
        .pipe(gulp.dest(yeoman.dist));
});

It seems that the additionalStreams is not work. Do I miss or misunderstand something?

[jonkemp]

Can you use gulp-debug to see whether the files are in the stream or not?

[lisposter]

same issue

[jonkemp]

@lisposter any code examples you can post are helpful.

[justqyx]

Hi, @jonkemp

After I add gulp debug into the pipe flow, there was no templates.js.

Here 's the latest code

gulp.task('client:build', ['copy:views', 'scss'], function() {
    var templatecacheStream = gulp.src(yeoman.app + '/views/**/*.html')
        .pipe($.angularTemplatecache({ module: yeoman.moduleName }));

    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');

    var assets = $.useref.assets({
        searchPath: [yeoman.app],
        additionalStreams: [templatecacheStream]
    });

    return gulp.src(paths.views.main)
        .pipe(assets)
        .pipe($.debug({ title: "client:build" }))
        .pipe(jsFilter)
        .pipe($.ngAnnotate())
        .pipe($.uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe($.minifyCss({ cache: true }))
        .pipe(cssFilter.restore())
        .pipe($.rev())
        .pipe(assets.restore())
        .pipe($.revReplace())
        .pipe($.useref())
        .pipe(gulp.dest(yeoman.dist));
});

Log

[09:43:27] Using gulpfile ~/Code/tcr-ios/gulpfile.js
[09:43:27] Starting 'copy:views'...
[09:43:27] Starting 'scss'...
[09:43:27] Finished 'copy:views' after 50 ms
[09:43:27] Finished 'scss' after 622 ms
[09:43:27] Starting 'client:build'...
[09:43:28] client:build app/styles/app.css
[09:43:28] client:build app/styles/vendor.css
[09:43:28] client:build app/scripts/vender.js
[09:43:39] client:build app/scripts/scripts.js
[09:43:42] client:build 4 items
[09:43:42] Finished 'client:build' after 15 s

After checking the the scripts.js file, I found it does not contains the content of templates.js.

Additional necessary infomations

OSX EI Capitan 10.11.1
node^0.12.4
npm^2.10.1
gulp^3.5.6
gulp-debug^2.1.2
gulp-useref^1.3.0

Sorry for my late response, I will follow up on this isssue as soon as possible in the next time.

Thanks for you reply.

[jonkemp]

@justqyx You should use the latest version of gulp-useref which is 2.1.0. What happens when you debug templatecacheStream? Or what happens if you just set up a task for gulp-angular-templatecache? Does that work? https://github.com/miickel/gulp-angular-templatecache#example

I'm wondering if either of those produces template.js. The problem may be there and not gulp-useref.

[justqyx]

@jonkemp After I upgrade the gulp-useref from 1.3.0 to 2.1.0, it works.

I use yeoman and it's generator-angular to generate my project, and read the gulp-useref^2.1.0 document while I don't have realized the generator use the 1.3.0 version default.

Sorry for my negligence and thank you very much for your reply.

@lisposter Maybe you can check the version of each gulp plugin and then refer to my code as follows

gulp.task('client:build', ['copy:views', 'scss'], function() {
    var templatecacheStream = gulp.src(yeoman.app + '/views/**/*.html')
        .pipe($.minifyHtml({
            empty: true,
            conditionals: true
        }))
        .pipe($.angularTemplatecache({ module: yeoman.moduleName }));

    var assets = $.useref.assets({
        searchPath: ['app', 'app/bower_components', 'app/scripts', 'app/styles'],
        additionalStreams: [templatecacheStream]
    });

    return gulp.src(paths.views.main)
        .pipe(assets)
        .pipe(gulpif('*.js', $.ngAnnotate()))
        .pipe(gulpif('*.js', $.uglify()))
        .pipe(gulpif('*.css', $.minifyCss({ cache: true })))
        .pipe($.rev())
        .pipe(assets.restore())
        .pipe($.revReplace())
        .pipe($.useref())
        .pipe(gulp.dest(yeoman.dist));
});

[lisposter]

@justqyx thanks for your advice, but my situation is not exactly the same as yours, I am using the latest version of gulp-useref, and other plugins just work well.

Since you post your worked code, I tried to add the gulp-minify-html plugin too, and it just goes well, maybe, something processed by gulp-minify-html broken the useref stream. I haven't prove it yet.

Anyway, your recipe just worked, perhaps someone need this information I comment here for refer.

[jonkemp]

Can I close this then?

[justqyx]

@jonkemp yeah.