Question

我有一个AngularJS应用程序，我正在使用usemin任务。这个应用程序有2个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 %>'
        }
    },

使用minmin是因为common.js在两个文件中定义并出现错误：致命错误：尝试写入同一目标的不同源：我（想）我需要在useminPrepare中包含page1和page2才能正确获取page1.js和page2.js。人们如何解决这个问题？

Answer 1

通常，角度人员会创建单页面应用程序，并为页面的整个骨架只创建一个“主”index.html。这样您只需要处理一组文件。使用ui-router，ng-includes或其他东西将不同的子页面渲染到给定的div中。

Answer 2

当我遇到这个问题时，我的问题是，代码必须完全在build / endbuild html注释之间相同。似乎它应该匹配文件名，但它似乎匹配评论之间的内容。甚至制表符与空格也是一个问题。

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

Answer 4

下面的更改对我来说就像是魅力：

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

Usemin“尝试写入同一目的地的不同来源”

4 个答案: