Minimizing html

[Tony_B_]

I have an html5 app developed using App Framework 2 and XDK. It runs fine on Android using a Crosswalk build, The index.html file contains around 7,000 lines of html and also including some js. I was wondering if there's a recommended tool to minimize this file. I've tried a couple of online tools, one failed because my file was too big, the other couldn't seem to figure out the end of a line of js when I had comments at the end of the line with "//" so before I go any further I was wondering if anyone's found a reliable minimizer tool..I'll also be building an iPhone version of this same app if that makes a difference.

Thanks for any suggestions.

Tony

[Chris_P_Intel]

Most of the JS  files that are linked in are probably already minified, no?   Typically the minified files have   .min.   in their filename.

And the ones that remain unminified are probably short.  I don't know of any proper JS minifiers that choke on //... . However, if you have inline JS in your HTML, I can well imagine that an HTML minifier might destroy the JS.     

If you have JS that is not yet minified and you want to minify it, checkout Uglify or Browserify. 

As to the HTML, it's pretty rare to minify HTML. Removing tabs and returns isn't going to gain you that much. But if you want to do that, you'll probably need to make sure there isn't any inline CSS or Javascript first.  

And, finally, this probably doesn't need to be mentioned, but be sure not to overwrite your original files.  Are you using source control, like Git?  Make sure everything is checked in properly in case of an accident. Source control is vital.

[Tony_B_]

Thanks Chris, very helpful advice, just what I needed to know.

[Elroy_A_Intel]

I recommend considering the gulp-minify-html npm package at https://www.npmjs.com/package/gulp-minify-html.

[Abel_G_]

For your HTML you can use the defer attribute:

• data-defer="filename.html" - This will load content into the panel from a remote page/url. This is useful for separating out content into different files. af.ui.ready is not available until all files are loaded asynchronously.

This gonna give you a more readable code

http://app-framework-software.intel.com/af22/documentation.php#afui/afui_panels