Gulp useref concatenates js files twice

Question

Gulp useref concatenates js files twice

1.1k Views Asked by divide by zero At 19 October 2024 at 16:48

I have such gulp task

 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}));
});

Generated by gulp angular yeoman, but I did some changes to isolate it from other tasks and localize problem.

The problem is, that after all concatenations produces app-%%%.js file contains dublicate code: original code e.g. and minified one

 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"]

This breaks my application.

Can someone help understand what's wrong with this build task?

P.S It seems that scripts injected in html look like

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

and both .tmp/serve/ directory and src/ directory has the same structure. Useref searches both and duplicates happen

Original Q&A

There are 1 best solutions below

**Andrzej Gis** · Accepted Answer

I realize the question is kind of old, but I've just came across the same problem.

The reason for duplicates was the line in index.html:

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

Gulp-useref looks for these lines and converts them like so:

From:

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

To:

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

It looks for the script files in paths based on the comment

build:js({.tmp/serve,.tmp/partials,src})

So in this case in 3 locations:

.tmp/serve
.tmp/partials
src

If your build scripts copied the files from src to .tmp/serve in meantime, useref found the files in both locations and so pasted them 2 times to the result file. So the fix is either to modify your build scripts not to copy the files or change that line in index.html to:

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

I guess it might not be the help for you after 5 years, but hopefully someone else will find it useful.

Gulp useref concatenates js files twice

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in GULP

Trending Questions

Popular # Hahtags

Popular Questions