Für Webentwicklung gibt es viele Templatesprachen, mit denen sich HTML-Seiten einfacher und weniger fehleranfällig gestalten lassen. Dank CSS-Preprocessoren müssen wir uns beim Design nicht unbedingt mit der sperrigen und fehleranfälligen Syntax von CSS (Cascading Style Sheets) auseinandersetzen. Und falls wir bei der Programmierung von Seiten-Logik keine Lust mehr auf JavaScript haben, dann gibt es auch dafür Alternativen.
Leider erfordert das Aufsetzen eines Projekts mit Alternativ-Technologien für HTML, CSS und JavaScript zumeist schon einen großen Aufwand. Für kleine statische HTML-Seiten lohnt sich dieser Mehraufwand nur selten. Doch mit dem richtigen Werkzeug kriegen wir all diese Alternativen geschenkt und Webentwicklung macht noch mehr Spaß. Der kleine Super-Technologie-Webserver nennt sich Harp und beherrscht ohne Konfigurationsaufwand folgende Technologien:
- HTML-Alternativen: Jade, Markdown, Ejs
- CSS-Alternativen: Less, Sass, Stylus
- JavaScript-Alternative: CoffeScript
Oder in Harps Worten:
Harp is a zero-configuration web server that is used to serve static assets. It has a built in asset pipeline for serving .jade, .markdown, .ejs, .coffee, .less, .styl as .html, .css, and .js. Harp supports a template agnostic layout/partial system and metadata for dynamically building files.
Bei einem vorinstallierten Node.js genügen eigentlich drei Befehle, um folgendes einfache Harp-Projekt zu erhalten:
- Harp global für den Benutzer mit dem npm-Paketmanger installieren:
sudo npm install -g harp
- Ein Harp-Projekt erstellen:
harp init example-harp-blueprint-css
- Harp-Webserver starten:
harp server example-harp-blueprint-css
- Mit Browser folgende URL aufrufen:
http://localhost:9000/
$ tree example-harp-blueprint-css example-harp-blueprint-css ├── 404.jade ├── _layout.jade ├── index.jade └── main.less
In einem vorherigen Beitrag habe ich ein Webseiten-Beispiel mit dem CSS-Framework Blueprint vorgestellt. Das Blueprint-Beispiel werden wir mit Hilfe des Harp-Webservers auf Jade und Stylus umstellen. Während das Beispiel nur aus einer index.html
-Datei mit integriertem CSS besteht, teilen wir die Datei für das Harp-Projekt auf die drei Dateien _mylayout.jade
(HTML-Layout), content.html
(HTML-Inhalt) und mystyle.styl
(Cascading Style Sheet) auf und ergänzen noch die Datei myjavascript.coffee
(JavaScript).
Statt der einfachen Harp-Projektstruktur (Root-Style) nutzen wir jedoch den empfohlenen Framework-Style, sodass die Harp-Dateien in einem eigenen public
-Verzeichnis abgelegt werden. Das Projekt kann man mit folgenden Befehlen aufsetzen und sich die endgültigen HTML-, CSS- und JavaScript-Dateien in das Verzeichnis ‚www
‚ generieren lassen:
$ sudo npm install -g harp $ mkdir example-harp-blueprint-css $ cd example-harp-blueprint-css $ touch harp.json $ mkdir public $ echo -e 'html\n background-color green' > public/mystyle.styl $ echo -e 'doAlert = () ->\n alert("Javascript-Alert")' > public/myjavascript.coffee $ echo -e 'link(rel="stylesheet", href="mystyle.css")\nscript( type="text/javascript", src="myjavascript.js")\nh1 Layout of _layout.jade\nblock content' > public/_mylayout.jade $ echo -e 'extends _mylayout\nblock content\n b(onclick="doAlert()") Inhalt von content.html (Klick mich)' > public/content.jade $ harp compile $ tree . ├── harp.json ├── public │ ├── _mylayout.jade │ ├── content.jade │ ├── myjavascript.coffee │ └── mystyle.styl └── www ├── content.html ├── myjavascript.js └── mystyle.css 2 directories, 8 files $ harp server --port 9000 ------------ Harp v0.12.1 – Chloi Inc. 2012–2014 Your server is listening at http://localhost:9000/ Press Ctl+C to stop the server ------------
Nachdem wir das Grundgerüst erstellt haben, bleiben für die Umstellung des Blueprint-Projekts auf Jade und Stylus mit dem Harp-Server noch folgende Aufgaben:
- kopieren der Blueprint-Dateien in das Projekt
- CSS aus der
index.html
in die Dateimystyle.styl
übertragen - HTML-Code des Layouts aus der
index.html
in die Datei_mylayout.jade
übertragen - HTML-Code des Inhalts aus der
index.html
in die Dateicontent.jade
übertragen
Die entsprechenden Jade- und Stylus-Dateien sind unten angefügt – und der Code ist so schön schlank !!! Einfach noch die CSS, JavaScript und HTML-Dateien mit Harp generieren und die Datei ‚www/content.html‘ sieht im Browser wie das ursprüngliche Beispiel aus. Natürlich kann der Code auch einfach bei Github heruntergeladen werden: https://github.com/me4bruno/blog-examples -> example-harp-blueprint-css
mystyle.styl
html body #header background-color #DDF #navigation background-color #FDF #content background-color #DFD #sidebar background-color #DFF #footer background-color #FDD
_mylayout.jade
doctype html head meta(charset="UTF-8") link(rel="stylesheet", href="blueprint/screen.css", type="text/css", media="screen, projection") link(rel="stylesheet", href="blueprint/print.css", type="text/css", media="print") //if lt IE 8 link(rel="stylesheet", href="blueprint/ie.css", type="text/css", media="screen, projection") link(rel="stylesheet", href="mystyle.css", type="text/css", media="screen, projection") title block title script( type="text/javascript", src="myjavascript.js") body .container #header.span-24.last h1 Header: Example Blueprint CSS .info(onclick='doAlert()') Blueprint ist ein tolles CSS-Framework #navigation.span-6 h3 Navigation ul li a(href="") Link 1 li a(href="") Link 2 li a(href="") Link 3 #content.span-12 block content #sidebar.span-6.last h3 Sidebar ol li a(href="") Artikel 1 li a(href="") Artikel 2 li a(href="") Artikel 3 #footer.span-24.last | Footer: Ein wunderschöner Footer mit Blueprint CSS.
content.jade
extends _mylayout block title | Example Blueprint CSS block content h2 Content p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.