4

I just started to think about the layout for the build environment of a javascript application that will become quite big in the future. I solved quite a lot of issues but one thing I still have not found a good solution for is the way how to deal with the script includes in my html pages. Maybe I am just plain stupid but I do not get it:

When developing the app I work with many little javascript files which all need to be included in my html page. When it comes to deployment I will combine/minfy all the javascript into a small number of script files. How do I deal with the changed number of script includes and the changed names of the includes? Do I adjust them manually? I hope not! Are there tools out there doing that job for me? Am I missing something very obvious?

BTW: The same problem is with CSS...

Any ideas and thoughts on this would be extremely helpful.

Andreas
  • 1,551
  • 4
  • 24
  • 55
  • Ignore my previous comment, this post may help you: http://stackoverflow.com/questions/15951645/reference-multiple-js-files-in-a-single-line-in-a-html-file – tymeJV Jun 07 '13 at 13:04
  • @tymeJV It answers the question of how to minify/concatenate. It does not answer the question how to deal with changed pathes and/or script file names. Thanks anyway! – Andreas Jun 07 '13 at 13:14
  • Ahh, then this post may help: http://stackoverflow.com/questions/4175008/how-can-i-include-all-javascript-files-in-a-directory-via-javascript-file -- Deals with including all JS files via server-side code. – tymeJV Jun 07 '13 at 13:17

2 Answers2

1

I use Grunt in my project. By means of Grunt you can write JS scripts to build your frontend applications. It lets you automate such tasks like minification, compilation, unit testing, linting and etc. Just use the search by plugins to find specific features.

Eugene Gluhotorenko
  • 3,094
  • 2
  • 33
  • 52
0

I use Douglas Crockford JsMin to minify all my scripts to a single file on Release Build. Take a look at this site. I created batch file that is executed on every Release Build in my Visual Studio Solution. All files with .debug.js in their names are minified and saved to a .bundle.js file that is included in Html. You can even manage order of inclusion by defining number in file name so no wrong loading is occured.

Davor Zubak
  • 4,726
  • 13
  • 59
  • 94
  • Thanks for the link. Interesting reading. It still does not answer how to adjust the references in my html files... – Andreas Jun 07 '13 at 13:41
  • What do you mean adjust the references, if you want one file for production and separate non-minified files for debug enviroment, just make simple if DEBUG and else. (if working with MS) - [here](http://stackoverflow.com/questions/2104099/c-sharp-if-then-directives-for-debug-vs-release) – Davor Zubak Jun 07 '13 at 13:44
  • I should have been more explicit with the intended development environment. I talk about pure JavaScript projects. When using dynamically created HTML, the solution would be easy (ASP.NET MVC etc) In pure JavaScript projects I have a static HTML page that provides the scaffold for the app and it therefore contains static reference paths. My question is, how to adjust those. Hope that make my question more clear... – Andreas Jun 07 '13 at 13:48