Andreas Bruns

Softwareentwicklung für Oldenburg und Bremen

Harp – Webseiten schlank entwerfen mit Jade und Stylus

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:

  1. Harp global für den Benutzer mit dem npm-Paketmanger installieren: sudo npm install -g harp
  2. Ein Harp-Projekt erstellen: harp init example-harp-blueprint-css
  3. Harp-Webserver starten: harp server example-harp-blueprint-css
  4. 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 Datei mystyle.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 Datei content.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.

Kommentare sind geschlossen.