Usemin "Different sources attempting to write to the same destination"

Question

I have an AngularJS app I'm working on usemin tasks for. This app has 2 html pages, both include a block minified into a common.js and the other pages include js minified for those specific pages.

page1.html

<!-- build:js scripts/common.js -->
<!-- bower:js -->
<script src="a.js"></script>
<script src="b.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/page1.js -->
<!-- bower:js -->
<script src="c.js"></script>
<script src="d.js"></script>
<!-- endbower -->
<!-- endbuild -->

page2.html

<!-- build:js scripts/common.js -->
<!-- bower:js -->
<script src="a.js"></script>
<script src="b.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/page2.js -->
<!-- bower:js -->
<script src="e.js"></script>
<script src="f.js"></script>
<!-- endbower -->
<!-- endbuild -->

Gruntfile.js

useminPrepare: {
    html: ['<%= yeoman.app %>/page1.html', '<%= yeoman.app %>/page2.html'],
        options: {
            dest: '<%= yeoman.dist %>'
        }
    },

Usemin is upset because common.js is defined in both files with the error: Fatal error: Different sources attempting to write to the same destination:. I (think) I need to include both page1 and page2 in the useminPrepare in order to correctly get page1.js and page2.js generated. How do people solve this issue?

Circinate

Did you figure this out? I have the same issue. – Thrombosis

I ended up renaming "common.js" to "common2.js" in one of the files because I needed to move on. It isn't a huge file so I'm not overly concerned, but I'd still like to come up with a better solution. – Circinate

Answer 1

Usually with angular people create single page applications and create only one "main" index.html for the whole skeleton of the page. This way you have to deal with only one set of files. The different sub-pages are rendered into a given div using ui-router, ng-includes or something else.

Highway

But that's not always the case. For example, we are creating a white label product, and we have an index.html file for each company. There are subtle changes in the index files, such as css files... but the js files are essentially the same. – Cavin

Answer 2

The issue for me when i ran into this problem was that the code has to be exactly the same between build/endbuild html comments. Seems it should match on file names, but it seems to match on the content between the the comments. Even tab vs spaces can be an issue.

Addendum

This is true for me ONLY in the case of build:css – Sinistrorse

Answer 3

WARNING UNTESTED.

You could create a custom block that would rewrite block to <script src="scripts/common.js"></script> but would not attempt to 'build' the script in the usemin process.

options: {
    blockReplacements: {
      noBuild: function (block) {
          return '<script src="scripts/common.js"></script>';
      }
    }

Then in all of the HTML files that you DO NOT want to build the common script for, but you DO want to replace the path for, write the following:

<!-- build:noBuild scripts/common.js -->
<!-- bower:js -->
<script src="a.js"></script>
<script src="b.js"></script>
<!-- endbower -->
<!-- endbuild -->

Signboard

I just tested it, doesn't work. An error about uglify started to show up after this. >> No "uglify" targets found. – Graphology

Answer 4

Below changes worked like charm for me:

useminPrepare: {
  page1: {
    dest: 'dist',
    src: ['page1.html']
  },
  page2: {
    dest: 'dist',
    src: ['page2.html']
  },
  options: {
     ...
  }
}

Clothbound