Auto-compile Jade in Webstorm on Windows
jade --out
option specifies the directory, not the file:
-O, --out <dir> output the compiled html to <dir>
To retain the directories structure you will have to use $FileDirPathFromParent$
macro that takes a parameter.
For example, for the C:\project\public\jade\subdir\subdir.jade
file we need it to return the path right to the jade
directory, that would be the parameter for the macro: $FileDirPathFromParent(jade)$
, and the result would be subdir
.
Now if you set the Working directory to $FileDir$
, the Arguments would be:
$FileName$ --out $ProjectFileDir$\public\$FileDirPathFromParent(jade)$
And the complete Jade File Watcher for this specific project layout would look like this:
R. Wayne
I'm a continually-learning developer who is always looking at new ideas and trying new tools and techniques. I work for Beanstream. My opinions are my own.
Updated on June 05, 2022Comments
-
R. Wayne almost 2 years
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:
jade --watch --out public jade
I'm now trying to configure my project in Webstorm to handle this automatically, and I'm running into problems.
To keep the source files separate from the generated ones, I'm aiming for a layout like this:
- root
- jade
- index.jade
- subdir
- subdir.jade
- public
- index.html
- subdir
- subdir.html
- jade
With the Arguments field set as:
--out $ProjectFileDir$\public\$FileNameWithoutExtension$.html $FileDir$\$FileName$
To start with, I have the following within my
jade
folder:- index.jade
- subdir
- index.jade
The result in my
public
folder is:- index.html (folder)
- index.html (file)
- subdir.html (folder)
- subdir.html (file)
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?
- root
-
R. Wayne about 11 yearsThat worked, but brought up a new problem - the
public
directory structure is flattened.index.html
andsubdir.html
appear side by side in thepublic directory
. I had hoped to maintain directory structure...Any suggestions? -
CrazyCoder about 11 yearsI've updated the answer, it turned out to be more tricky, especially with the missing documentation for the
$FileDirPathFromParent$
macro, had to look for the tests in the IDE source code. -
R. Wayne about 11 yearsThat fixed it. Also works with sub-sub-directories, so looks good! The documentation I saw on creating watchers was kinda sparse, and I certainly hadn't found the link you provided. Now I'm on to figuring out the Jade system.
-
FutuToad over 10 yearsthanks, but I already have jade as a node module in the webstorm project, I can't find the jade.cmd file in that module in the project
-
onkami about 10 yearsI have jade installed as npm, but I do not seem to have jade.cmd. Any way to obtain it from npm or should I write it myself (I seem to have other cmd files from gulp, karma and they are straightforward).
-
CrazyCoder about 10 years@AskarIbragimov it was available via npm, not sure if they've changed it recently
-
onkami about 10 yearsnot at the moment it seems. But I successfully adopted gulp.cmd file, as such: @IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\node_modules\jade\bin\jade.js" %* ) ELSE ( node "%~dp0\node_modules\jade\bin\jade.js" %* )
-
jcklie almost 10 yearsIf you install it with "npm install jade --global", it tells you where the jade.cmd is installed. Mine was exactly where the screenshot tells you to look.
-
denyptw about 9 yearshow to add new line in compile jade to html code in phpstorm, for easy read?, jade example : header //this blank line not comment div.content ,but in html file, //blank line not display, header and div.content join in two line.