Question

我有这样的gulp任务

 gulp.task('html', [], function() {
    var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', {read: false});
    var partialsInjectOptions = {
        starttag: '<!-- inject:partials -->',
        ignorePath: options.tmp + '/partials',
        addRootSlash: false
    };

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

    return gulp.src(options.tmp + '/serve/*.html')
        .pipe($.inject(partialsInjectFile, partialsInjectOptions))
        .pipe(assets = $.useref.assets())
        .pipe($.rev())
        .pipe(jsFilter)
        .pipe($.ngAnnotate())
        .pipe($.uglify({preserveComments: $.uglifySaveLicense})).on('error', options.errorHandler('Uglify'))
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe(assets.restore())
        .pipe($.useref())
        .pipe($.revReplace())
        .pipe(htmlFilter)
        .pipe($.minifyHtml({
            empty: true,
            spare: true,
            quotes: true,
            conditionals: true
        }))
        .pipe(htmlFilter.restore())
        .pipe(gulp.dest(options.dist + '/'))
        .pipe($.size({title: options.dist + '/', showFiles: true}));
});

由gulp angular yeoman生成，但我做了一些更改，将其与其他任务隔离开来，并将问题本地化。

问题是，在所有连接后产生app - %%%。js文件包含dublicate代码：原始代码例如并缩小一个

 function() {
    "use strict";
    function e(e, t) {
        return e(t + "/something", {}, {get: {method: "get", isArray: !0}})
     }

    angular.module("app.mappings").factory("Something", e), e.$inject = ["$resource", "API_ROOT"]
    }(),

 angular.module("app.mappings").factory("Something", Something), Something.$inject = ["$resource", "API_ROOT"]

这打破了我的申请。

有人可以帮助了解此构建任务的错误吗？

P.S似乎用html注入的脚本看起来像

<script src="app/mappings/mappings.module.js"></script>

并且.tmp / serve /目录和src /目录都具有相同的结构。 Useref搜索两者并重复发生

Answer 1

我意识到问题有点陈旧，但我遇到了同样的问题。

重复的原因是index.html中的一行：

<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
...
<!-- endbuild -->

Gulp-useref查找这些行并将其转换为：

自：

<html>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <!-- endbuild -->
</body>
</html>

要：

<html>
<body>
    <script src="scripts/combined.js"></script>
</body>
</html>

它根据评论

查找路径中的脚本文件

构建：JS（{。TMP /服务，的.tmp /分音，SRC}）

所以在这种情况下，在3个地点：

.tmp / serve
的.tmp /分音
SRC

如果您的构建脚本同时将文件从src复制到.tmp/serve，useref会在两个位置找到这些文件，并将其粘贴到结果文件中2次。因此，修复方法是修改构建脚本，不要复制文件或将index.html中的行更改为：

<!-- build:js(.tmp/serve) scripts/app.js -->

我想这可能不是5年后的帮助，但希望其他人会发现它有用。

Gulp useref连接两次js文件

1 个答案: