Using gulp-useref with Polymer and Angular2 project

Question

we're trying to get gulp-useref to work with the Angular2 app that we're working on, in particular the task that is used to build the app for production.

Unfortunately gulp-useref doesn't like html import so much, and is not clear to me if it's possible to create a custom function as it's explained for the parent useref package.

Different things that I've tried already: - using gulp-useref-import - using noconcat

Does anyone has tried to do something similar?

Our project is based on this Starter Repo

Answer 1

Ok, in the end I've able to get it to work, but it hasn't been easy to figure out.

So this has to go in the index.html (notice the I had to spin-off the Polymer initialization to its own file)

<!-- build:js assets/webcomponents.js -->
<script src="/assets/components/webcomponentsjs/webcomponents.js"></script>
<!-- endinject -->
<!-- build:js assets/polymer.js -->
<script src="/assets/scripts/polymer.js"></script>
<!-- endinject -->
<!-- build:custom elements.html -->
<link rel="import" href="/assets/components/polymer/polymer.html">
<link rel="import" href="/assets/components/paper-button/paper-button.html">
<link rel="import" href="/assets/components/paper-input/paper-input.html">
<!-- endinject -->

And this is the change needed in the build.js

gulp.src(config.assetsPath.components + '**/*.*', {
        base: config.assetsPath.components
    })
    .pipe(gulp.dest(config.build.assetPath + 'components'));

gulp.src(config.index)
    .pipe(useref({
        custom: function(content, target) {
            return content === '/assets/components' ? target : content;
        }
    }))

useref is still not able to combine the html files but now it will keep the references instead of stripping them