Jade Auto-compile in Webstorm su Windows

Question

Recentemente ho scoperto Jade e voglio provarlo per un nuovo sito web statico. Mi piace la sintassi concisa e le funzionalità di template, molto meglio di HTML non elaborato. Sto modificando in Webstorm 6, che supporta gli osservatori di file e può essere eseguito ad es. Sass fuori dalla scatola. Sono stato in grado di eseguire Jade tramite la riga di comando per guardare i miei file Jade:

jade --watch --out public jade 

Ora sto cercando di configurare il mio progetto in WebStorm per gestire questo automaticamente, e sto correndo in problemi.

Per mantenere la fonte file separati da quelli generati, sto puntando per un layout simile a questo:

• radice
  • giada
    • index.jade
    • sottodirectory
      • subdir.jade
  • pubblico
    • index.html
    • subdir
      • subdir.html

Con il campo di argomenti esposti come:

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

Per cominciare, ho il seguente cartella nel mio jade:

• index.jade
• subdir
  • index.jade

Il risultato nel mio public fo lder è:

• index.html (cartella)
  • index.html (file)
• subdir.html (cartella)
  • subdir.html (file)

Questa è la prima volta che ho provato a utilizzare il file watc la sua funzionalità e le macro disponibili mi stanno confondendo. Qualcuno con esperienza in una situazione simile ha qualche suggerimento?

Answer 1

jade --out opzione specifica la directory, non il file:

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

di mantenere la struttura delle directory si dovrà utilizzare $FileDirPathFromParent$ macro che accetta un parametro.

Ad esempio, per il file C:\project\public\jade\subdir\subdir.jade ne abbiamo bisogno per tornare la strada giusta per la directory jade, che sarebbe il parametro per la macro: $FileDirPathFromParent(jade)$, e il risultato sarebbe subdir.

Ora, se si imposta la directory lavoro-$FileDir$, i Argomenti sarebbe:

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

e la completa Jade file Watcher per questo layout specifico progetto sarebbe simile a questa: