Инструмент для автоматического встраивания CSS и Javascript в HTML

Знаете ли вы какой-нибудь инструмент для

автоматически встраивать внешние ресурсы CSS и JavaScript в файл HTML ?

Цель состоит в том, чтобы иметь один файл HTML, который можно было бы правильно просматривать в автономном режиме.

Подобно какому- то старому вопросу о StackOverflow (но ответы там, похоже, поддерживают только CSS, а не Javascript).

Любая из платформ: онлайн (веб-доступ), Unix, Windows в порядке.

Я думал, что это может быть достигнуто заменой всего:

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

с

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

и так же все <link rel="stylesheet" type="text/css" href="theme.css">с

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

(или любой другой синтаксис)

Не могли бы вы отредактировать свой вопрос и назвать свои требования к ОС, на которой он должен работать?
Добавил уточнение.
Источником будет веб-страница в Интернете или исходные файлы, которые есть на вашем компьютере?
@NickWilde - у меня будет файл HTML на моем компьютере, а ссылки будут в Интернете (http://), например, на общедоступные библиотеки Javascript (например, JQuery). | Но если это проблема, я всегда могу wgetиспользовать все ресурсы.
хорошо, тогда я думаю , что у меня есть хороший вариант. Я просто протестирую его, прежде чем рекомендовать (я скачал его некоторое время назад, но еще не успел поиграть с ним)
@NickWilde - это будет оценено! Спасибо

Ответы (5)

Установка/использование:

  • Установите Python 2.7xобязательно выберите опцию, чтобы добавить его в переменную PATH.
  • Установите Node.js
  • Установите Windows SDK 7.1 . Он будет работать на любой вещи XP+. Windows SDK 8 не будет работать из коробки — он не включает все инструменты. Если у вас уже установлены распространяемые файлы VS 2010, попробуйте снять их флажок в установщике для Windows SDK — в противном случае вам, возможно, придется удалить их, чтобы иметь возможность установить это, а затем переустановить более новую версию, если вам это нужно в какой-то момент.
  • Установите пакет WebCombiner Node.js. Лучше всего использовать строку cmd npm install -g web-combiner из командной строки SDK, а не обычную строку cmd.
  • запустить командную строкуinliner path.html out.html true

Эти инструкции предполагают Windows - если не Windows, SDK, очевидно, не нужен, но может потребоваться альтернативный компилятор.

Любой <link href=должен обращаться к локальным файлам, иначе ему это не нравится (т.е. фатальная ошибка). Это, вероятно, можно было бы исправить довольно легко, но в настоящее время это слабость. Худшая часть этого заключается в том, что он не проверяет, является ли это ссылкой css, поэтому ссылки на атомы/изображения <linkтакже вызывают проблемы. Очевидно, это означает, что css/js должны быть локальными, но простое сохранение как html-страница из Firefox или Chrome сохраняет их по умолчанию, так что это не должно быть серьезной проблемой, хотя и немного раздражает.

Спасибо, что поделились этим. Это кажется довольно простым инструментом и имеет некоторые проблемы, например, github.com/newghost/web-combiner/issues/1.

Ответ Ника Уайльда привел меня к другому ответу:

другой проект nodejs под названием Inliner .

(Я только начал пытаться использовать это и еще не преуспел в своей цели - так как всплывают некоторые ошибки)

Исходный код WebCombiner Ника Уайлда содержал комментарий, указывающий на проект Inliner: github.com/newghost/web-combiner/commit/…
Инструмент Inliner также имеет некоторые ошибки. Я столкнулся с этим: github.com/remy/inliner/issues/13 Но в остальном - похоже, он работает довольно хорошо. Например nodejs ./inliner.js -i "http://softwarerecs.stackexchange.com/questions/9983/tool-to-automatically-inline-both-css-and-javascript-into-html", получается большой файл HTML с JQuery и другими встроенными средствами.
Если кому-то интересно, мне удалось устранить проблему № 13 и отправить запрос на извлечение в репозиторий. Работает на меня.
Недавно я использовал этот инструмент для встраивания, и он отлично работает. В настоящее время он не встраивает уже минимизированный javascript (*.min.js). Однако, отредактировав исходный код, вы можете обойти это, если это необходимо.

Ваш вопрос не очень ясен, но чем ближе я вижу к вашей цели (один файл HTML) формат MHTML . Хорошо, это не один файл HTML, а один файл MHTML, но вы можете включать в него JS, CSS и многое другое, например изображения!

Microsoft IE может сохранять страницу в один файл MHT.

Плагин Firefox UnMHT позволяет отображать этот файл на любой ОС.

Вот интересная страница об этом:

Как открыть файлы .mht в Firefox в Linux

он сказал, что если он хочет этого, то должен «иметь один HTML-файл, который можно правильно просматривать в автономном режиме». Так вот, это еще один путь к той же цели… ИМХО, но его вопрос не ясен
Хорошо, я думаю, это имеет тот же конечный результат (просмотр в автономном режиме), но ОП думал о другом методе, чем то, что вы сказали .
Я знаю, и, может быть, это потому, что он не знает, что другой метод был доступен (я не знаю), поэтому я предлагаю этот метод.
@PascalQyy «ИМХО, но его вопрос не ясен» - пожалуйста, помогите мне сделать вопрос более ясным. Какой информации вам не хватает?
Если мой ответ совсем не соответствует вашим потребностям, это будет яснее
Релевантно: проблемы XY — иногда спрашивающий задает неправильный вопрос. Этот ответ может быть правильным ответом, если это так.

Я добавляю это, потому что мне недавно нужно было выполнить точную задачу, но это решение кажется проще в настройке....

Вы можете установить python, а затем запустить pip install htmlark[http,parsers]для установки 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

Полученный HTML-код выводится на стандартный вывод, поэтому вам нужно использовать перенаправление вывода, чтобы сохранить его в файл, подобный этому:htmlark http://example.com/ > inlined.html

Этот инструмент с открытым исходным кодом от Wildbit (производители почтовых штемпелей) был только что выпущен и выглядит многообещающе...

СтильОбъединить

Простое встраивание CSS для электронной почты, C# и других языков на базе .net.

https://github.com/wildbit/стиль-слияние