javascript - Update JS references in HTML page for different environments -

i have 2 types of generated js files:

1. xyz.js
2. xyz.min.js

i want refer both @ different times, different environments.

currently need update references manually, there large number of js files: there technique avoid manual updating. possible?

using gruntjs, have multiple choices solve problem:

1. point 1 single file in html , switch version/type get's compiled different folders depending on environment (by having @ least 2 grunt-tasks):

grunt build:dev , grunt build:live

---

2. use grunt-processhtml package. again depending on environment require different targets. (untested):

```

<!-- build:dev --> <script src="js/lib/path/lib.js"></script> <script src="js/deep/development/path/script.js"></script> <!-- /build -->  <!-- build:dist --> <script src="js/app.min.js"></script> <!-- /build --> 

```

there grunt-targethtml or grunt-preprocess or grunt-htmlrefs

---

3. or let change src .min when building distribution-environment:

```

<!-- build:dist:js js/app.min.js --> <script src="js/app.js"></script> <!-- /build -->  <!-- changed --> <script src="js/app.min.js"></script> 

```

---

4. assuming use grunt-uglify again point 1 single file , let grunt-uglify generate source-maps. these serve minified versions environments, have sourcemapping-file next it, , when view code in console/debugger looks development-code: introduction javascript source maps

---

5. reading article addy osmani this, points out string/regex replacement (excerpt taken article):

    'string-replace': {       prod: {         src: './app/**/*.html',         dest: './dist/',         options: {           replacements: [{             pattern: 'source.js',             replacement: 'build.js'           }]         }       } 

---

6. mentions, use template variables in html, , let grunt-template or grunt-include-replace let work you.