javascript - Programmatically switch to production sources for webpage -


i have website project includes several javascript files @ end of body of index.html, 3rd party libraries, rest wrote:

<html>   ...   <body>   ...   <script src="lib/lib1.js"></script>   <script src="lib/lib2.js"></script>   <script src="js/js1.js"></script>   <script src="js/js2.js"></script>   ...   </body> </html> 

for production, naturally want optimized set of includes. one, part of larger build process (using maven) of non-library javascript combined, optimized , minified. use minified library files (perhaps cdn):

<html>   ...   <body>   ...   <script src="lib/lib1.min.js"></script>   <script src="//cdn/lib2.min.js"></script>   <script src="js/combined.min.js"></script>   ...   </body> </html> 

a similar process used our css.

so, question is: what techniques people use accomplish such switch between sets of scripts/css?

since production build process uses maven, i'm open suggestions involving maven plugin such this one. however, workflow reasons, keep index.html clean (e.g., don't want token in place of script includes, needs work without further processing.)

i came maven-based solution, using maven-replacer-plugin. in html files, block development , production code using comments:

<!-- development --> <script src="lib/lib1.js"></script> <script src="lib/lib2.js"></script> <script src="js/js1.js"></script> <script src="js/js2.js"></script> <!-- /development --> <!-- production <script src="lib/lib1.min.js"></script> <script src="//cdn/lib2.min.js"></script> <script src="js/combined.min.js"></script> /production --> 

then, use following configuration block maven plugin:

<configuration>     <file>index.html</file>     <replacements>         <replacement>             <token>&lt;!-- development --&gt;</token>             <value>&lt;!-- development</value>         </replacement>         <replacement>             <token>&lt;!-- /development --&gt;</token>             <value>/development --&gt;</value>         </replacement>         <replacement>             <token>&lt;!-- production</token>             <value>&lt;!-- production --&gt;</value>         </replacement>         <replacement>             <token>/production --&gt;</token>             <value>&lt;!-- /production --&gt;</value>         </replacement>     </replacements> </configuration> 

after running, development code toggled off , production code toggled on:

<!-- development <script src="lib/lib1.js"></script> <script src="lib/lib2.js"></script> <script src="js/js1.js"></script> <script src="js/js2.js"></script> /development --> <!-- production --> <script src="lib/lib1.min.js"></script> <script src="//cdn/lib2.min.js"></script> <script src="js/combined.min.js"></script> <!-- /production --> 

obviously, remove development code instead.


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -