I have a typical web page with a single html file. This page uses css, javascript modules (requirejs) and images. I would like to generate a single html file containing all the resources embedded and minified including the html file itself.

This is the structure that I have:

myApp/
   www/
      css/
          css1.css
          css2.css
      img/
          img1.png
          img2.png
      js/
          main.js
          module1.js
      index.html

And I would like to generate this:

myApp/
   www-build/
      index.min.html

I know that exists different tools to optimize javascripts, css and html. But the question is how to assemble them in a single file automaticaly.

I have a typical web page with a single html file. This page uses css, javascript modules (requirejs) and images. I would like to generate a single html file containing all the resources embedded and minified including the html file itself.

This is the structure that I have:

myApp/
   www/
      css/
          css1.css
          css2.css
      img/
          img1.png
          img2.png
      js/
          main.js
          module1.js
      index.html

And I would like to generate this:

myApp/
   www-build/
      index.min.html

I know that exists different tools to optimize javascripts, css and html. But the question is how to assemble them in a single file automaticaly.

• javascript
• optimization
• web
• minify
• gruntjs

• 1 Meh. Anyone who visits the site more than once will encounter a huge amount of superfluous traffic. That's why these resources should be external - so they can be cached separately from the main content (nothing wrong with minifying each into one CSS file and one js file though, of course) – Pekka Commented Jun 12, 2013 at 7:27
• I agree that, in general, this practice is not a good idea. But when the page is small and when you need a fast responding page, it could be a solution. Imagine that you are accessing a page to a server in the other side of the globe. It is not the same if the user has to go two times to the server that just one. – jbaylina Commented Jun 12, 2013 at 8:05
• I see your point, but while you speed up the experience on first page load, you end up slowing it down every time after that. I'd estimate it's not a good deal in most scenarios – Pekka Commented Jun 12, 2013 at 8:18

4 Answers 4

I ended up using gruntjs and a series of grunt tasks to do the job:

• A Jade template with the include directive to import js and css.
• grunt-base64 To convert the images to base64.

The jade file, would be some thing like this:

html
    head
        title= "Example Page"
        include css/css1.css
        include css/css2.css
        include js/main.js
        include js/module1.js

    body
        | <img src="data:image/png;base64,
        include img1.b64
        | "/>

        | <img src="data:image/png;base64,
        include img2.b64
        | "/>

        canvas#myCanvas 

I also used uglify and other excellent predefined tasks to optimize the code.

you could try https://github./remy/inliner

you can install with:

$ npm install -g inliner

and then execute (see inliner --help for possible options)

$ inliner index.html > index.min.html

or you can use it online at http://inliner.webapplist./

I'm not sure about generating it as one whole file, but you can use Google Granule to press [to one file] and minify your CSS files and JS files programmatically and on the fly. (when page is being loaded). This will reduce web page load time significantly.

Checkout:

http://code.google./p/granule/

You can include everything in your single file, but I don't think that's a good idea, as Pekka's men already points out. But anyway: you can include your Javascript with tags, same with CSS (or inline CSS). For the images: you need to convert them to a string in order to save them within the page. Base64 encoding will do the job. Here's an example: http://www.sweeting/mark/blog/2005/07/12/base64-encoded-images-embedded-in-html