title: Auto-compile Jade in Webstorm on Windows
body: <p>I recently discovered Jade and want to give it a try for a new static website. I like the terse syntax and the templating capabilities, so much better than raw HTML. I'm editing in Webstorm 6, which has support for file watchers, and can run e.g. Sass out of the box. I've been able to run Jade via the command line to watch my Jade files:</p>
  
  <pre><code>jade --watch --out public jade
  </code></pre>
  
  <p>I'm now trying to configure my project in Webstorm to handle this automatically, and I'm running into problems.</p>
  
  <p>To keep the source files separate from the generated ones, I'm aiming for a layout like this:</p>
  
  <ul>
  <li>root
  <ul>
  <li>jade
  <ul>
  <li>index.jade</li>
  <li>subdir
  <ul>
  <li>subdir.jade</li>
  </ul></li>
  </ul></li>
  <li>public
  <ul>
  <li>index.html</li>
  <li>subdir
  <ul>
  <li>subdir.html</li>
  </ul></li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>With the Arguments field set as:</p>
  
  <pre><code>--out $ProjectFileDir$\public\$FileNameWithoutExtension$.html $FileDir$\$FileName$
  </code></pre>
  
  <p>To start with, I have the following within my <code>jade</code> folder:</p>
  
  <ul>
  <li>index.jade</li>
  <li>subdir
  <ul>
  <li>index.jade</li>
  </ul></li>
  </ul>
  
  <p>The result in my <code>public</code> folder is:</p>
  
  <ul>
  <li>index.html (folder)
  <ul>
  <li>index.html (file)</li>
  </ul></li>
  <li>subdir.html (folder)
  <ul>
  <li>subdir.html (file)</li>
  </ul></li>
  </ul>
  
  <p>This is the first time I've tried to use the file watcher feature, and the available macros are confusing me. Has anyone with experience in a similar situation any suggestions?</p>