Jade升级为pug

为什么要升级：

jade和注册商标重名，更名为pug。新版本将发布在pug，jade将停止维护，但是之前使用jade的项目还是能用，只是无法使用新的语法功能。

Pug安装：

1、首先要通过Node.js的npm来安装pug，直接在cmd里面输入：npm install –g pug，前提是你安装了node和npm，还需要安装npm install -g pug-cli ，不然会出现pug not found。-g表示全局安装。检验是否安装成功：pug –V(大写)。

Paste_Image.png

2、写一个test.pug文件，在cmd里进入test.pug的目录下，输入
pug -P -w test.pug回车即可出现rendered test.html，修改test.pug的时候，只要保存，html会及时更新。

Paste_Image.png

新版本的改进将逐步取消和删除一些API和非法语言特性

1、 Attribute Interpolation 属性插值(pug中不认识#{link})
//- jade

a(href='#{link}')

a(href='before#{link}after')
/- pug (link表示传参)

a(href=link)
a(href='before' + link + 'after')

2、each循环语法修改，去掉前缀 – (pug中不删去 - 将会报错)
//- jade

- each a in b 
  = a

- for a in b
  = a

//- pug

each a in b
  = a

for a in b
  = a

3、基本语法
官网地址https://pugjs.org/language/attributes.html

开发工具的使用和注意事项

sublime_text暂时只有支持jade的插件
1、ctrl + shift + p 输入jade

Paste_Image.png

(首先sublime text3得先安装Package Control扩展管理器)
2、暂时并没有支持pug的插件：

Paste_Image.png

WebStorm中pug的使用

Paste_Image.png

一个tab相当于4个空格，建议统一用tab(ctrl + alt + s设置编辑器)

Paste_Image.png

Tab和空格混用容易报错。
批处理文件.bat命名不能以jade和pug来命名：

Paste_Image.png