使用gulp-useref与Polymer和Angular2项目

时间:2016-07-28 07:47:52

标签: angular systemjs gulp-useref

我们正在尝试使用 gulp-useref 来处理我们正在处理的Angular2应用,特别是用于构建应用以进行制作的任务。

不幸的是 gulp-useref 并不像html导入这么多,并且我不清楚它是否可以创建自定义函数,因为它已经解释对于父 useref 包。

我已尝试过不同的事情:   - 使用gulp-useref-import   - 使用noconcat

有没有人试图做类似的事情?

我们的项目基于此Starter Repo

1 个答案:

答案 0 :(得分:0)

好的,最后我能够让它发挥作用,但要弄清楚并不容易。

所以这必须进入 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文件,但现在它将保留引用而不是剥离它们