[컴][웹] jade - Node template engine

jade 사용하기, 설치

설치

c:\Program Files\nodejs>npm install jade
jade@1.7.0 node_modules\jade
├── commander@2.1.0
├── character-parser@1.2.0
├── void-elements@1.0.0
├── mkdirp@0.5.0 (minimist@0.0.8)
├── constantinople@2.0.1 (uglify-js@2.4.15)
├── with@3.0.1 (uglify-js@2.4.15)
├── transformers@2.1.0 (promise@2.0.0, css@1.0.8, uglify-js@2.2.5)
└── monocle@1.1.51 (readdirp@0.2.5)

global 로 설치하면 좀 더 쉽게 사용할 수 있을지도 모르지만, 여하튼 개인적으로 싫어해서 여기서는 global 로 설치하지 않았다. ^^;;


그래서 jade 를 쉽게 사용하기 위한 batch 를 <node-path> 에 만들어 놓자.

:: Created by npm, please don't edit manually.
@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" "%~dp0\.\node_modules\jade\bin\jade.js" %*
) ELSE (
  node "%~dp0\.\node_modules\jade\bin\jade.js" %*
)

그리고 아래와 같은 방식으로 사용하면 된다.

c:\> "c:\Program Files\nodejs\jade.cmd" jade --pretty

위와 같은 command 를 실행하면 c:\jade 에 있는 .jade 를 모두 html 로 compile 해준다.

HTML2Jade

기존의 html 을 jade 로 변환시켜 줄 수 있다.

web version : HTML2Jade - HTML to Jade Online Realtime Converter

npm install

참고 : donpark/html2jade · GitHub

c:\Program Files\nodejs>npm install html2jade
html2jade@0.7.8 node_modules\html2jade
├── commander@2.3.0
├── he@0.4.1
└── jsdom-little@0.10.5 (nwmatcher@1.3.3, cssom@0.3.0, cssstyle@0.2.14, htmlp
arser2@3.7.3)

사용법

global 로 설치 했다면 아래와 같이 실행할 수 있다.

html2jade mywebpage.html

위처럼 실행하면 mywebpage.jade 가 생성된다.

.bat

local 로 설치했다면 아래와 같은 .bat 파일을 하나 만들어서 사용하면 된다.

:: html2jade.bat
:: Created by npm, please don't edit manually.
@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" "%~dp0\.\node_modules\html2jade\cli.js" %*
) ELSE (
  node "%~dp0\.\node_modules\html2jade\cli.js" %*
)

제대로 converting 이 안되는 경우

converting 이 잘못 되는 경우도 있으니, 꼭 jade 를 html 로 변환 후 확인을 해 보자.

필자가 직접 해봤을 때 converting 이 잘못 되는 것은 아래와 같다.

<!--[if lt IE 9]>
  <script src="assets/javascripts/ie.min.js"></script>
<![endif]-->

이 경우 직접 pipe 를 이용해서 넣었다.

    | <!--[if lt IE 9]>
    |     <script src="assets/javascripts/ie.min.js"></script>
    | <![endif]-->

See Also

1. 쿠...sal: [컴][웹] Jade 사용하기