使用Usemin时，“不同来源尝试写入同一目标位置”

Question

我正在开发一个AngularJS应用程序，并使用usemin任务进行处理。该应用程序有两个HTML页面，均包含一个被压缩为common.js的块，另一个页面包含针对特定页面进行压缩的js。

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 报错了，因为两个文件中都定义了 common.js，错误信息如下：Fatal error: Different sources attempting to write to the same destination:。我认为需要在 useminPrepare 中同时包含 page1 和 page2，以便正确生成 page1.js 和 page2.js。那么人们是如何解决这个问题的呢？

- Justin

---

你解决了吗？我也遇到了同样的问题。 - Joao

我最终在一个文件中将 "common.js" 重命名为 "common2.js"，因为我需要继续下去。虽然它不是一个很大的文件，所以我并不过于担心，但我仍然希望能想出更好的解决方案。 - Justin

Answer 1

当我遇到这个问题时，对我而言问题在于代码必须在build/endbuild HTML注释之间完全相同。看起来应该匹配文件名，但似乎是在注释之间的内容上进行匹配。甚至制表符和空格也可能会成为问题。

- Shawn

---

这仅适用于我在构建：css的情况下。 - John Bernardsson

Answer 2

通常使用angular创建单页面应用程序，并仅为整个页面的骨架创建一个“主”index.html。这样，您只需要处理一组文件。不同的子页面使用ui-router、ng-includes或其他方式呈现到给定的div中。

- Lajos Veres

---

但这并不总是如此。例如，我们正在创建一个白标产品，为每个公司都有一个index.html文件。索引文件中有细微的变化，比如CSS文件...但JS文件基本上是相同的。 - JobaDiniz

Answer 3

警告：未经测试。

您可以创建一个自定义块，将块重写为<script src="scripts/common.js"></script>，但不会尝试在usemin过程中“构建”脚本。

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

然后在所有不想为其构建公共脚本但需要替换路径的HTML文件中，编写以下内容：

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

- Huston Hedinger

---

我刚刚测试了一下，不起作用。在此之后出现了一个关于uglify的错误。 >> 没有找到“uglify”目标。 - darksoulsong

Answer 4

以下更改对我非常有效：

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

- Krunal