Pug Template Engine

Siehe auch Jade Template Engine

Jade ist der Vorgäner. Aus rechtlichen Gründen wurde Jade umbenannt. Pug hat aber auch einige Veränderungen erfahren.

Links

https://pugjs.org
https://github.com/pugjs/pug-cli (Command Line Interface)
https://codeburst.io/getting-started-with-pug-template-engine-e49cfa291e33

Installation

Eventuell mit sudo davor

npm install --global pug

und das Command Line Interface bei neueren Versionen (sonst gehts nur über das Package.json File)

npm install pug-cli -g

Beispiele

Pug Watcher und Sass Watcher mit NodeJS

Sass Watcher kompiliert eine styles.sass Datei in scss/ nach css/ und der Pug Watcher kompiliert .pug Dateien aus dem Ordner Templates in den Hauptordner (./). In styles.sass kann man per @import "myScssFile.scss" weitere Styles einbinden und bekommt so ein einzelnes css File mit allen Styles.

Der Sass Watcher Zusätzlich haben wir noch sass-compile-folder und sass-watch-folder dieser kompiliert alle geänderten scss und sass Dateien aus dem Ordner scss/ nach css/ nicht nur die styles.css Datei Package.json

 ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass-compile": "node-sass --include-path sass scss/styles.sass css/styles.css",
    "sass-compile-folder": "node-sass scss/ -o css/",
    "sass-watch": "node-sass --watch --include-path sass scss/styles.sass css/styles.css",
    "sass-watch-folder": "node-sass --watch scss -o css",
    "pug-watch": "pug -w templates/ --out ./",
    "start": "npm run sass-watch | npm run pug-watch"
 ...
  },

Start mit

npm run start

Abbrechen mit Ctrl + c

Das Pipe Symbol im start Befehl sorgt dafür, dass sass-watch und pug-watch parallel ablaufen. Mit && würden die Befehle nacheinander laufen. Da aber der Sass Watcher immer läuft bis er abgebrochen wird, müßte der Pug Watcher so lange warten und würde nie gestartet werden.