Change link or script filename in html after gruntjs minify/uglify

Question

I am using standard minify/uglify for css/js files and combine multiple files to main.min.css or app.min.js... However my .html file needs to be modified to point to these new file names too in <link> or <script>

Is there a way to automate this? Or how to modify .html files automatically to rename the file names in there using gruntjs?

Answer 1

You can do this with grunt-string-replace. Here's an example on how you could use it.

In my index.html you find the following import tags:

<!--start PROD imports <script src="assets/dist/traffic.min.js"></script> end PROD imports-->  <!--start DEV imports--> <script src="assets/js/app.js"></script> <script src="assets/js/services.js"></script>  <script src="assets/js/directives.js"></script> <script src="assets/js/filters.js"></script> <script src="assets/js/resources.js"></script> <script src="assets/js/controller/homeControllers.js"></script> <script src="assets/js/controller/adminControllers.js"></script> <script src="assets/js/controller/reportsControllers.js"></script> <!--end DEV imports--> 

Notice the 'start imports' and 'end imports' comments. By default (in DEV) we comment out the PROD import.

In my grunt file I then add the following task:

    'string-replace': {         inline: {             files: {                 'index.html': 'index.html'             },             options: {                 replacements: [                     {                         pattern: '<!--start PROD imports',                         replacement: '<!--start PROD imports-->'                     },                     {                         pattern: 'end PROD imports-->',                         replacement: '<!--end PROD imports-->'                     },                     {                         pattern: '<!--start DEV imports-->',                         replacement: '<!--start DEV imports'                     },                     {                         pattern: '<!--end DEV imports-->',                         replacement: 'end DEV imports-->'                     }                 ]             }         }     } 

Running the task (grunt string-replace) gives me:

<!--start PROD imports--> <script src="assets/dist/traffic.min.js"></script> <!--end PROD imports-->  <!--start DEV imports <script src="assets/js/app.js"></script> <script src="assets/js/services.js"></script> <script src="assets/js/directives.js"></script> <script src="assets/js/filters.js"></script> <script src="assets/js/resources.js"></script> <script src="assets/js/controller/homeControllers.js"></script> <script src="assets/js/controller/adminControllers.js"></script> <script src="assets/js/controller/reportsControllers.js"></script> end DEV imports--> 

Now the DEV imports have been commented out, while the PROD import is no longer commented out.