-2

Does anyone know of a tool that can look at a webpage with its styles and scripts and images, and then create an HTML file which has those styles and scripts and images embedded, but only the ones which are actually used by that page?

I have a typical "this site is offline for maintenance" page, which is actually an entire website in its own right, based on Bootstrap 3. I want to reduce this whole website into a single file with only the images, CSS and JS required to display the page.

Update

Using the typical browser Save File functionality does not achieve what I want, as it firstly does not embed the CSS/JS resources in the page, but saves them in a subfolder and references them from there; and secondly, does not appear to strip out the styles and scripts that are not directly referenced by that page, rather saving the files in their entirety.

David Keaveny
  • 3,483
  • 1
  • 32
  • 47
  • You can File -> Save As complete html from browser, and then you have the full page. – Maxali Jan 21 '16 at 00:53
  • Which browser are you using that embeds only the script/styles that are used by that page? Chrome and Firefox save the complete files in a sub-folder - they don't embed them, and they don't strip out stuff which isn't in use. – David Keaveny Jan 21 '16 at 02:28

1 Answers1

1

I believe SnappySnippet will help. It extracts the HTML & CSS from an element and sends it to e.g. jsfiddle to review. You'd extract it from the HTML element, should work.

Regrettably, it doesn't do JS, but for a Maintenance page it should work fine.

Some details from the creator on SO and here on YouTube.

Community
  • 1
  • 1
DACrosby
  • 10,150
  • 3
  • 34
  • 49
  • Thanks, this seems to be about as close as I am going to get to a solution. Unfortunately it doesn't seem to be able to work with the various Bootstrap sprites, but at least the CSS is picked up properly, so it's a good starting point. – David Keaveny Feb 01 '16 at 05:22