17

Do you know some tool to

automatically inline both CSS and JavaScript external resources into a HTML file?

The goal is to have a single HTML file which can be properly viewed off-line.

Similar to some old question on StackOverflow (but the answers there seem to support CSS only, not Javascript).

Either of the platforms: online (web access), Unix, Windows is fine.

I thought that could be reached by replacing all:

<script type="text/javascript" src="x.js"></script>

with

   <script type="text/javascript">
     And here goes the content of the x.js file
   </script>

and similarly all <link rel="stylesheet" type="text/css" href="theme.css"> with 

<head>
 <style>
   Here goes the content of theme.css
 </style
</head>

(or whatever the actual syntax is)

Improve this question
6
  • 2
    Could you please edit your question and name your requirements concerning the OS it should run on?
    – Izzy ♦
    Jul 21, 2014 at 11:09
  • 1
    Added the clarification.
    – Grzegorz Oledzki
    Jul 21, 2014 at 14:44
  • 1
    Would the source be a webpage online or from source files you have on your computer?
    – Nick Dickinson-Wilde
    Jul 21, 2014 at 18:19
  • @NickWilde - I will have the HTML file on my computer, while the links will be on the Internet (http://), e.q. to the publicly hosted Javascript libraries (e.g. JQuery). | But if it's a problem, I can always wget all the resources.
    – Grzegorz Oledzki
    Jul 21, 2014 at 18:21
  • okay then I think I have a good option. I'll just test it before actually recommending it (I downloaded it a while back but haven't got around to playing with it yet)
    – Nick Dickinson-Wilde
    Jul 21, 2014 at 18:24

5 Answers 5

Reset to default
4

Installation/Usage:

  • Install Python 2.7x - make sure to select the option to add it to the PATH var
  • Install Node.js
  • Install Windows SDK 7.1 . It'll work on any thing XP+. Windows SDK 8 won't work out of the box - doesn't include all the tools. If you have the VS 2010 redistributables installed already try unchecking them in the installer for the Windows SDK - otherwise you may have to uninstall them to be able to install this and then reinstall the newer version if you need to at some point.
  • Install WebCombiner Node.js package. Best to use cmd line npm install -g web-combiner from the SDK commandline rather than the normal cmd line is easiest
  • run command line inliner path.html out.html true

These instructions assumes windows - if not windows the SDK obviously is not needed but alternative compiler might be required.

Any <link href= have to refer to local files or it doesn't like it (ie fatal error). This could probably be fixed fairly easily but it is a weakness currently. Worst part of this is it doesn't check that it is a css link so atom/image refs under <link cause problems too. Obviously that means the css/js have to be local but just going save as html page from Firefox or Chrome saves those by default so that shouldn't be a serious problem though slightly annoying.

Improve this answer
1
3

Nick Wilde's answer led to me another answer:

another nodejs project called Inliner.

(I have only started to try to use that and haven't succeeded with my goal yet - as some bugs pop up)

Improve this answer
4
  • The source code for "Nick Wilde's" WebCombiner contained a comment pointing to the Inliner project: github.com/newghost/web-combiner/commit/…
    – Grzegorz Oledzki
    Jul 22, 2014 at 12:06
  • The Inliner tool has some bugs too. I've encountered this one: github.com/remy/inliner/issues/13 But other than that - it seems to work pretty well. E.g. nodejs ./inliner.js -i "http://softwarerecs.stackexchange.com/questions/9983/tool-to-automatically-inline-both-css-and-javascript-into-html" yields a large HTML file with JQuery and others inlined.
    – Grzegorz Oledzki
    Jul 22, 2014 at 12:39
  • In case anyone is interested, I've managed to troubleshoot the issue #13 and submitted a pull request to the repository. Works for me.
    – Grzegorz Oledzki
    Jul 22, 2014 at 15:14
  • I used this inliner tool recently, and it works great. Currently, it does not inline already minified javascript (*.min.js). However, by editing the source you could get around that, if needed.
    – Marcel
    Nov 10, 2015 at 7:12
2

Your question is not very clear, but the closer I can see to your goal (a single HTML file) is the MHTML format. Ok, it's not a single HTML file, but a single MHTML file, but, you can include JS, CSS and much more inside, like images!

Microsoft IE is able to save a page into a single MHT file.

The Firefox plugin UnMHT alows you to render this file on every OS.

Here is an interesting page about it:

How to open .mht files in Firefox on Linux

Improve this answer
6
  • he said that if he want to to this, it's to "have a single HTML file which can be properly viewed off-line.". So, this is another way to the same goal… IMHO, but his question is not clear
    – Pascal Qyy
    Jul 21, 2014 at 17:24
  • OK, I guess this has the same end result (view off-line), but the OP was thinking of a different method than what you've said
    – ᔕᖺᘎᕊ
    Jul 21, 2014 at 17:27
  • I know, and maybe it's because he don't know other method was aviable (I don't know), so, it's why I suggest this method.
    – Pascal Qyy
    Jul 21, 2014 at 17:35
  • @PascalQyy "IMHO, but his question is not clear" - please help me make the question clearer. What information do you lack?
    – Grzegorz Oledzki
    Jul 21, 2014 at 17:41
  • 1
    Relevant: XY problems - sometimes the asker is asking the wrong question. This answer could be the right answer, if so.
    – Bobson
    Jul 21, 2014 at 19:48
0

I'm adding this because I recently needed to do the exact task but this solution seems easier to setup....

You can install python then run pip install htmlark[http,parsers] to install HTMLArk.


usage: htmlark [-h] [-o OUTPUT] [-E] [-I] [-C] [-J]
               [-p {html.parser,lxml,html5lib,auto}] [-v] [--version]
               [webpage]

Converts a webpage including external resources into a single HTML file. Note
that resources loaded with JavaScript will not be handled by this program, it
will only work properly with static pages.

positional arguments:
  webpage               URL or path of webpage to convert. If not specified,
                        read from STDIN.

optional arguments:
  -h, --help            show this help message and exit
  -o OUTPUT, --output OUTPUT
                        File to write output. Defaults to STDOUT.
  -E, --ignore-errors   Ignores unreadable resources
  -I, --ignore-images   Ignores images during conversion
  -C, --ignore-css      Ignores stylesheets during conversion
  -J, --ignore-js       Ignores external JavaScript during conversion
  -p {html.parser,lxml,html5lib,auto}, --parser {html.parser,lxml,html5lib,auto}
                        Select HTML parser. If not specifed, htmlark tries to
                        use lxml, html5lib, and html.parser in that order (the
                        'auto' option). See documentation for more
                        information.
  -v, --verbose         Prints information during conversion
  --version             Displays version information

The resulting html is printed to the standard output so you need to use output redirection to save it to a file like this: htmlark http://example.com/ > inlined.html

Improve this answer
-1

This open source tool from Wildbit (makers of postmark) was just released and looks promising...

StyleMerge

Simple CSS inlining, for email, for C# and other .net-based languages.

https://github.com/wildbit/style-merge

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.