노드 프론트엔드 개발 템플릿 엔진 Jade를 사용하는 방법

이번에는 노드 프론트엔드 개발템플릿 엔진Jade 사용 방법과 노드 프론트엔드 개발 템플릿 엔진 Jade 사용 시 주의사항에 대해 알려드리겠습니다.

웹의 발전과 함께 프론트엔드 애플리케이션은 점점 더 복잡해졌고, 백엔드 기반의 javascript(Node.js)도 이때 등장하기 시작했습니다. 기대와 동시에 JavaScript MVC 아이디어도 인기를 끌기 시작했습니다. 사용자 인터페이스와 비즈니스 데이터(컨텐츠)를 분리하기 위해 '템플릿 엔진'이라는 개념이 탄생했습니다.

간단히 말하면 템플릿 엔진은 여러 변수를 결정해야 하는 문자열이며 데이터는 템플릿 엔진 기능을 통해 동적으로 여기에 채워집니다.

오늘은 Jade의 사용법과 문법 설명에 대해 이야기해보겠습니다. Jade 공식 웹사이트: jade-lang.com/

Jade 명령줄 도구

Jade를 사용하려면 Node 환경에 의존해야 합니다. 설치가 성공한 후 Jade 명령줄 도구를 설치하세요. , 이름이 *.jade인 파일 접미사를 사용하여 새 파일을 생성할 수 있습니다. 우리는 jade의 구문을 마음껏 사용할 수 있습니다. 작성한 후에는 명령줄 도구를 통해 이를 일반적으로 사용하는 html 정적 파일로 컴파일하기만 하면 됩니다.

설치 방법

1. 먼저 Node 환경과 npm 도구가 설치되어 있는지 확인합니다.

명령줄 도구에서 다음 코드를 실행합니다.

node -v
=> v0.10.35
npm -v
=> 1.4.28
// 如果成功返回版本号信息即为已成功安装 Node 环境。

2. npm

npm install jade -g
// mac用户可能需要管理员权限，使用如下命令
sudo npm install jade -g

3을 통해 *.Jade 파일을 생성하고 작업을 시작합니다.

4. Jade 명령줄 도구를 사용하여 jade 파일을 html 파일로 컴파일합니다

Jade 명령줄 도구 사용 방법

Jade를 통해 Jade 명령줄 도구의 매개변수를 볼 수 있습니다. help

jade --help
Usage: jade [options] [dir|file ...]
 Options:
  -h, --help     output usage information / 输出使用信息
  -V, --version   output the version number / 输出版本号信息
  -O, --obj <str>  javascript options object / 传输到 jade 文件中的数据对象
  -o, --out <dir>  output the compiled html to <dir> / 输出编译后的 HTML 到 <dir> 
  -p, --path <path> filename used to resolve includes / 在处理 stdio 时，查找包含文件时的查找路径
  -P, --pretty    compile pretty html output / 格式化编译 html 文件
  -c, --client    compile function for client-side runtime.js / 编译浏览器端可用的 runtime.js
  -n, --name <str>  The name of the compiled template (requires --client) / 编译模板的名字
  -D, --no-debug   compile without debugging (smaller functions) / 关闭编译的调试选项(函数会更小)
  -w, --watch    watch files for changes and automatically re-render / 监听文件改变并自动刷新编译结果
  --name-after-file Name the template after the last section of the file path (requires --client and overriden by --name)
  --doctype <str>  Specify the doctype on the command line (useful if it is not specified by the template) / 在命令行中指定文档类型(如果在模板中没有被指定)
 Examples:
  # 编译整个目录
  $ jade templates
  # 生成 {foo,bar}.html
  $ jade {foo,bar}.jade
  # 在标准IO下使用jade
  $ jade < my.jade > my.html
  # 在标准IO下使用jade
  $ echo 'h1 Jade!' | jade
  # foo, bar 目录渲染到 /tmp
  $ jade foo bar --out /tmp

예:

// 比如说我们需要编译index.jade文件，默认编译到同文件夹下的同名html 文件中
jade index.jade
// 如果我们要格式化输出 index.html 文件，只需要添加 -P 参数即可
jade -P index.jade
// 如果我们要实现监听和自动编译，需要使用 -w 参数
jade -P -w index.jade

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

노드 프런트 엔드 템플릿 엔진 Jade 태그를 사용하는 방법

Vue 드래그 앤 드롭 구성 요소를 개발하는 방법

위 내용은 노드 프론트엔드 개발 템플릿 엔진 Jade를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!