title: How can I reference different <script> tags on my html page in Visual Studio in a local dev vs. deployed sense?
body: <p>I would like to know how can I reference different javascript files on my html page in Visual Studio which reflect the appropriate environment - local dev vs. deployed (on Azure)</p>
  
  <p>For example, when I am developing locally, I have something like this at the bottom of my <code>&lt;body&gt;</code> tag (abbreviated dummy names used)</p>
  
  <pre><code>&lt;script src="js/local-1.js"&gt;&lt;/script&gt;
  &lt;script src="js/local-2.js"&gt;&lt;/script&gt;
  &lt;script src="js/local-3.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>When I am ready for deployment, I leverage grunt to concat and minify these files. The script I reference will now look as such</p>
  
  <pre><code>&lt;script src="js/concat-and-minified.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This works fine, but I am left with the manual process of ensuring I deploy the correct html page with the deployed script reference, then when interested in local development, I change it back</p>
  
  <p>Surely you can see this is tedious and I think qualifies as an unnecessary step, but I am unable to find a way to achieve this.</p>
  
  <p>So, is there a way to select which <code>&lt;script&gt;</code> tags exist on my html page depending on the environment of the site? Furthermore, is this primarily even an IDE consideration, or am I missing some other factor?</p>
  
  <h2>Additional details</h2>
  
  <p>Though this is in Visual Studio, the front end project is strictly Angular with a single page html file, so any sort of MVC bundling or <code>.cshtml</code> if/else logic is not applicable</p>