在 Polymer 和 Angular2 项目中使用 gulp-useref答案

【问题标题】：Using gulp-useref with Polymer and Angular2 project在 Polymer 和 Angular2 项目中使用 gulp-useref
【发布时间】：2016-07-28 07:47:52
【问题描述】：

我们正试图让 gulp-useref 与我们正在开发的 Angular2 应用程序一起工作，特别是用于构建生产应用程序的任务。

不幸的是 gulp-useref 不太喜欢 html 导入，我不清楚是否可以创建自定义函数，因为它为父 useref 包。

我已经尝试过的不同方法： - 使用 gulp-useref-import - 使用 noconcat

有没有人尝试过做类似的事情？

我们的项目就是基于这个Starter Repo

【问题讨论】：

标签： angular systemjs gulp-useref

【解决方案1】：

好的，最后我已经能够让它工作了，但它并不容易弄清楚。

所以这必须放在 index.html 中（注意我必须将 Polymer 初始化分拆到它自己的文件中）

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

这是 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 仍然无法合并 html 文件，但现在它将保留引用而不是剥离它们

【讨论】：