Jade in Webstorm unter Windows automatisch kompilieren

Question

Ich habe vor kurzem Jade entdeckt und möchte es für eine neue statische Website ausprobieren. Ich mag die knappe Syntax und die Templating-Funktionen, also viel besser als HTML. Ich bearbeite in Webstorm 6, das Dateiwächter unterstützt, und kann z. Sass aus der Box. Ich habe in der Lage Jade über die Kommandozeile ausführen, um meine Jade Dateien zu sehen:

jade --watch --out public jade 

ich jetzt versuche, mein Projekt in WebStorm konfigurieren dies automatisch zu handhaben, und ich laufe in Probleme.

Damit die Quelldateien aus den generierten diejenigen trennen, ich bin mit dem Ziel für ein Layout wie folgt aus:

• Wurzel
  • Jade
    • index.jade
    • subdir
      • subdir.jade
  • öffentliche
    • index.html
    • subdir
      • subdir.html

Mit dem Feld Argumente gesetzt, wie:

--out $ProjectFileDir$\public\$FileNameWithoutExtension$.html $FileDir$\$FileName$ 

mit zu beginnen, ich habe folgendes in meinem jade Ordner:

• index.jade
• subdir
  • index.jade

Die Ergebnis in meinem public fo lder ist:

• index.html (Ordner)
  • index.html (Datei)
• subdir.html (Ordner)
  • subdir.html (Datei)

Dies ist das erste Mal, dass ich versucht habe, die Datei watc zu verwenden ihre Funktion und die verfügbaren Makros verwirren mich. Hat jemand mit Erfahrung in einer ähnlichen Situation irgendwelche Vorschläge?

Answer 1

jade --out Option gibt das Verzeichnis an, nicht die Datei:

-O, --out <dir> output the compiled html to <dir> 

die Verzeichnisstruktur beizubehalten Sie $FileDirPathFromParent$ Makro verwenden, die einen Parameter annimmt.

Zum Beispiel für die C:\project\public\jade\subdir\subdir.jade Datei wir müssen den Pfad zurückzukehren Recht auf jade Verzeichnis, das wäre der Parameter für das Makro sein: $FileDirPathFromParent(jade)$, und das Ergebnis wäre subdir sein.

Nun, wenn Sie das Arbeitsverzeichnis gesetzt-$FileDir$, die Argumente wäre:

$FileName$ --out $ProjectFileDir$\public\$FileDirPathFromParent(jade)$ 

Und die komplette Jade Datei Watcher für dieses spezielle Projekt-Layout würde wie folgt aussehen: