Usemin and multiple build configurations

Question

Following is the sample usemin build configuration in my index.html file

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

For development version, I dont want to minify the scripts and i want each module into its own js file. So the index.html after running would be

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

For production version,I want to minify the scripts and concat them into a single file.So the index.html would be

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

I tried the following , but it is not working:

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

And run the use-min task like this (prod would be set to true in the prod task and false in dev task) -

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

I can keep two index.html files and manage this.But I was wondering can this be achieved with a single index.html?

Thanks in advance for any help.

Answer 1

What about this? Merge all javascript files in 2 files like in your dev env. After that just merge those two files into one big?

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

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

Or even marge all files with one build?

<!-- build:myApp js/myApp.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>
<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 -->

Answer 2

It looks like you're using the same pipeline id: js

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

Try using unique pipeline ids like so:

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