使用 gulp-useref 如何添加额外的文件？答案

【问题标题】：Use gulp-useref how to add extra files?使用 gulp-useref 如何添加额外的文件？
【发布时间】：2017-07-10 22:10:48
【问题描述】：

我的html文件是这样的：

...
<!-- build:js build/js/vendor.js -->
<script src="dep/angular/angular.js"></script>
<!-- endbuild -->

像这样构建文件：

<script src="build/js/vendor.xxxxxxxx.js"></script>

现在我用gulp-angular-templatecache把所有的view文件打包，生成一个template.js，我想把这个文件加到编译好的html文件里面，怎么做？

我在additionalStreams设置选项里找到了gulp-useref文档，但是我以前找过什么是不想实现的功能。

【问题讨论】：

标签： javascript angularjs node.js gulp gulp-useref

【解决方案1】：

我用另一种方式解决了。

先写在页面上：

<!-- build:templates --><!-- endbuild -->

在打包之前用gulp-replace替换成这样：

<!-- build:js build/js/templates.js -->
    <script src="build/js/templates.js"></script>
<!-- endbuild -->

终于统一编译了。

代码：

var indexHtmlFilter = $.filter(['**/*', '!**/index_dev.html'], {
    restore: true
});

var fontglyphiconsMatch = /^\.\.\/fonts\/glyphicons/;
var fontawesomeMatch = /^\.\.\/fonts\/fontawesome-/;
var imgMatch = /^\.\.\/img\//;

var matchUrlType = function(url){
    if(fontglyphiconsMatch.test(url))
        return  url.replace(/^\.\./, '/dep/bootstrap-css-only');

    if(fontawesomeMatch.test(url))
        return url.replace(/^\.\./, '/dep/font-awesome');

    if(imgMatch.test(url))
        return url.replace(/^\.\./, '');
};
gulp.src('app/index_dev.html')
    .pipe($.htmlReplace({
        templates: `
            <!-- build:js build/js/templates.js -->
            <script src="build/js/templates.js"></script>
            <!-- endbuild -->
            `
    }))
    .pipe($.useref())
    .pipe($.if('*.js', $.uglify({
        output: {
            ascii_only: true
        }
    })))
    .pipe($.if('*.css', $.modifyCssUrls({
        modify: matchUrlType
    })))
    .pipe($.if('*.css', $.cleanCss()))
    .pipe(indexHtmlFilter)
    .pipe($.rev())
    .pipe($.revFormat({
        prefix: '.'
    }))
    .pipe(indexHtmlFilter.restore)
    .pipe($.revReplace())
    .pipe($.if('*.html', $.htmlmin({
        collapseWhitespace: true
    })))
    .pipe($.if('index_dev.html', $.rename('index.html')))
    .pipe(gulp.dest('./app'));

【讨论】：