Wie stelle ich eine Website als einzelne Datei zur Verfügung?

Question

Ich habe eine Bare-Metal-Anwendung läuft auf einem winzigen 16-Bit-Mikrocontroller (St10) mit 10BASE-T Ethernet (CS8900) und eine Tcp/IP-Implementierung basierend auf dem EasyWeb-Projekt.

Es ist ein winziger Webserver zum Anzeigen von Statusinformationen des Geräts und zum Ändern von Einstellungen usw. verfügbar.

Für den Browser-Zugriff liefert der Webserver einige Dateien wie index.html, *.css, *.js, *.svg, *.png und so weiter.

Da das Bare-Metal-Ziel keine Speichermedien wie eine SD-Karte hat, lege ich alle oben genannten Ressourcen in die kompilierte Binärdatei.

Für Daten speichern und Verkehr zu reduzieren, habe ich alle Dateien in eine einzige index.html Kompresse, die gzip und mein Webserver liefert diese Content-Encoding: gzip mit verwenden.

Der Schritt, um alle Dateien in einzelne index.htm zusammen zu setzen, ist derzeit manuelle Arbeit (inkl. Ersetzen von Dateinamen Referenzen usw.). Könnte es ein Werkzeug geben, das das automatisch macht?

Oder alternativ, kann ich nur zip/tar/was auch immer alle Dateien in eine einzige Datei und liefern diese auf http GET / Anfrage?

bearbeiten 2017-10-05

gelöst durch die inliner von brain99 erwähnt werden.

mit kleinen Schwierigkeiten macht es auf Kubuntu 16.04 Host laufen, aber es endgültig fixiert durch die Installation:

sudo apt-get install nodejs 
sudo ln -sT "$(which nodejs)" /usr/local/bin/node 
sudo apt-get install npm 
sudo npm install -g inliner 

Vielleicht, ich habe von der Symlink befreien würde durch die Verwendung nodejs-legacy statt nodejs (noch nicht ausprobiert). Nachdem installiert, dass ich muss nur laufen:

inliner index.html >index-backed.html 
gzip -c index-backed.html >index.html.gz 

Answer 1

Option 1: via Chrome

ein Satz von zwei Chrome-Erweiterungen Es gibt die Ihnen erlauben, eine Webseite zu einem einzigen HTML-Datei zu speichern:

• SingleFile
• SingleFile Core

Die zweite Erweiterung ist eine Helfer Erweiterung, die von der ersten benötigt wird. Ich habe das nicht getestet, aber im Chrome Web Store scheint es ziemlich gute Kritiken zu geben (anscheinend kann es auf komplexen Seiten ersticken).

Mit diesen Erweiterungen sollten Sie nur in der Lage sein, die Seite in Chrome zu öffnen und die Erweiterungen als eine einzige Datei mit eingebetteten CSS/Skripten/Bildern zu speichern.

Option 2: skript

Wenn Sie die Dinge in einem Skript automatisieren möchten, gibt es auch eine project on github genau für das, was über npm installiert werden kann.

Answer 2

ich ein wenig verwirrt bin auf das, was Sie tun wollen, aber ich vermute, Sie brauchen eine Möglichkeit, etwas Speicherplatz zu sparen, ist eine Sache, die Sie vielleicht könnten versuchen, beim Speichern einiger Dateien in Google Drive? Auf diese Weise müssen Sie nicht auf dort über die Dateien Sorge, Sie einfach Ihre Bilder hochladen, und ziehen Sie sie aus dem Laufwerk wie folgt aus:

<img src="https://drive.google.com/uc?export=download&id=YOUR_FILE_ID"> 

Natürlich YOUR_FILE_ID mit Ihrer tatsächlichen Datei-ID ersetzen, erhalten, dass durch Verwenden Sie den Freigabe-Link für Google Drive. Wie folgt aus:

https://drive.google.com/file/d/YOUR_FILE_ID/view?usp=sharing

würde ich dieses eine bessere Lösung finden, als es zu zippen, aber die Wahl liegt bei Ihnen, hoffen, dass dies hilft Ihnen!