vendredi 8 mai 2015

how to create multiple js files from index.html using grunt usemin

My index.html has split js files as follows:

<head>
  ....
  <!-- build:js js/app1.min.js -->
  <!-- js from lib -->
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/angular-route/angular-route.min.js"></script>

  <!-- js of this app -->
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>

  <!-- external js -->
  <script type="text/javascript" src="http://ift.tt/1lrRXYd"></script>
  <!-- endbuild -->
  ....
</head>

.....
<body>
...
  <!-- build:js js/app2.min.js -->

  <!-- js from lib -->
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <!-- angular-animate provides search functionality -->

  <!-- js of this app -->      
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

  <!-- endbuild -->
  ....
</body>

As you can see, I tried to use two sets of js files. The reason to split is performance. How to use usemin in this case. I tried with following:

'useminPrepare': {
  'html': 'app/index.html'
},

'usemin': {
  'html': ['dist/index.html']
},

However, there is no folder/file created. But in index.html, those two sections are replaced appropriately by app1.min.js and app2.min.js

Moreover, I do not understand one thing that all examples are using concat and uglify in combination of usemin. The files in index.html which are already *.min.js eg. files included in bower_components folder, what happens to them?

Aucun commentaire:

Enregistrer un commentaire