grunt duplicate js files injection

[anz000]

With wiredep-away, I can inject the dependencies using the following grunt task.

grunt.registerTask('testing','',function(){
    require('wiredep-away')({
      src: './app/index.html',
      directory: './node_modules/@bower_components',
      bowerJson: require('./package.json'),
      dependencies: true,
      includeSelf: false,
      devDependencies: false,
      exclude: [],
      overrides: {
       },
      fileTypes: {
        html: {
          block: /(([ \t]*)<!--\s*bower_custom:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
        },
      }
    });
  });   

My package.json looks like this

`{
  "name": "xyzApp",
  "version": "2.4.2",
  "dependencies": {
    "@bower_components/jquery": "jquery/jquery-dist#~3.1.1",
    "@bower_components/angular": "angular/bower-angular#~1.5.8",
    "@bower_components/angular-animate": "angular/bower-angular-animate#~1.5.8",
    "@bower_components/angular-aria": "angular/bower-angular-aria#^1.7.2",
    "@bower_components/angular-cookies": "angular/bower-angular-cookies#~1.5.8",
    "@bower_components/angular-elastic": "monospaced/angular-elastic#~2.5.1",
    "@bower_components/angular-material": "angular/bower-material#~1.1.1",
    "@bower_components/angular-messages": "angular/bower-angular-messages#^1.7.2",
    "@bower_components/angular-mocks": "angular/bower-angular-mocks#~1.5.8",
    "@bower_components/angular-resource": "angular/bower-angular-resource#~1.5.8",
    "@bower_components/angular-route": "angular/bower-angular-route#~1.5.8",
    "@bower_components/angular-sanitize": "angular/bower-angular-sanitize#~1.5.8",
    "@bower_components/angular-scenario": "angular/bower-angular-scenario#~1.5.8",
    "@bower_components/angular-ui-router": "angular-ui/angular-ui-router-bower#~0.3.1",
    "@bower_components/angular-uuid4": "monicao/angular-uuid4#~0.3.1",
    "@bower_components/bootstrap-sass-official": "twbs/bootstrap-sass#~3.3.7",
    "@bower_components/es5-shim": "es-shims/es5-shim#~4.5.9",
    "@bower_components/jplayer": "happyworm/jPlayer#2.9.2",
    "@bower_components/json3": "bestiejs/json3#~3.3.2",
    "@bower_components/ngInfiniteScroll": "ng-infinite-scroll/ng-infinite-scroll-bower#~1.3.0"
  },`

The problem when the files are injected, there are duplication

`<!-- bower_custom:js -->
<script src="../node_modules/@bower_components/jquery/dist/jquery.js"></script>
<script src="../node_modules/@bower_components/angular/angular.js"></script>
<script src="../node_modules/@bower_components/angular/angular.js"></script>
<script src="../node_modules/@bower_components/angular-animate/angular-animate.js"></script>
<script src="../node_modules/@bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../node_modules/@bower_components/angular-elastic/elastic.js"></script>
<script src="../node_modules/@bower_components/angular-animate/angular-animate.js"></script>
<script src="../node_modules/@bower_components/angular-aria/angular-aria.js"></script>
<script src="../node_modules/@bower_components/angular-messages/angular-messages.js"></script>
<script src="../node_modules/@bower_components/angular-material/angular-material.js"></script>
<script src="../node_modules/@bower_components/angular-resource/angular-resource.js"></script>
<script src="../node_modules/@bower_components/angular-route/angular-route.js"></script>
<script src="../node_modules/@bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../node_modules/@bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../node_modules/@bower_components/angular-uuid4/angular-uuid4.js"></script>
<script src="../node_modules/@bower_components/jquery/dist/jquery.js"></script>
<script src="../node_modules/@bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="../node_modules/@bower_components/es5-shim/es5-shim.js"></script>
<script src="../node_modules/@bower_components/jplayer/dist/jplayer/jquery.jplayer.js"></script>
<script src="../node_modules/@bower_components/json3/lib/json3.js"></script>
<script src="../node_modules/@bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script>
<!-- endbower -->`

How can I remove such duplicate injections? Thanks.

[johnnyasantoss]

Hello! Sorry for the delay, I forgot to check this issue and github doesn't have a nice view of pending checks hehe.
About the duplicates: I thought it was being handled by the wiredep code 🤔
The changes I did to this fork was to make it prefer the node_modules/@bower_components over bower_components directory.

I can look in to that but, right now I'm studying so I don't think I'll be able to do it anytime soon 😅

A PR is always welcome (even though this code is really hard to debug and understand)

[johnnyasantoss]

btw: the idea behind the fork is to have a migration tool from bower to yarn so you can use this for one version and start to make changes to your build system to be more aware of importing modules from node_modules and to help you in the migration process for something like browserify, webpack or rollup.

I recommend reading this: https://bower.io/blog/2017/how-to-migrate-away-from-bower/ :)

[anz000]

Thanks. I've gone through that link for bower-away, and was looking into alternative for wiredep. That's how I landed here. I can use yarn/npm to install from package.json after migration.

Well, when I use the "wiredep" instead of "wiredep-away", I don't get duplications. Instead I ran into the problem of a missing dependency there. I have a very old legacy AngularJS code base so using browserify/webpack will be quite difficult even with wholesale changes.

Good luck with your studies. And kudos for a wonderful work here.