javascript - Usemin 和多个构建配置

Question

以下是我的 index.html 文件中的示例 usemin 构建配置

<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->

<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->

对于开发版本，我不想缩小脚本，我希望每个模块都放入自己的 js 文件中。所以运行后的 index.html 将是

<script src="js/one.js"></script>
<script src="js/two.js"></script>

对于生产版本，我想缩小脚本并将它们连接到一个文件中。所以 index.html 将是

<script src="js/myApp.js"></script>

我尝试了以下方法，但它不起作用:

<!-- build:myApp js/myApp.js -->
<!-- build:js js/one.js -->
<script src="app/modules/one/one.js"></script>
<script src="app/modules/one/two.js"></script>
<script src="app/modules/one/three.js"></script>
<!-- endbuild -->

<!-- build:js js/two.js -->
<script src="app/modules/two/one.js"></script>
<script src="app/modules/two/two.js"></script>
<script src="app/modules/two/three.js"></script>
<!-- endbuild -->
<!-- endbuild -->

然后像这样运行 use-min 任务(prod 将在 prod 任务中设置为 true，在 dev 任务中设置为 false)-

usemin({
          myApp: prod?[uglify({mangle:true})]:'',
          js: prod?'':[uglify({mangle:false})]
      }).

我可以保留两个 index.html 文件并管理它。但我想知道这可以用一个 index.html 实现吗？

在此先感谢您的帮助。

Answer 1

看起来您正在使用相同的管道 ID:js

 <!-- build:js js/one.js -->
 <!-- build:js js/two.js -->

尝试像这样使用唯一的管道 ID:

 <!-- build:js1 js/one.js -->
 <!-- build:js2 js/two.js -->