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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、pug原为jade,后来更名了。 二、pug的安装 1、首先在node.js中下载安装node和npm,然后要...
    雅玲哑铃阅读 3,808评论 0 2
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 13,138评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    晚晴幽草阅读 713,909评论 149 1,114
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,486评论 19 139
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 13,872评论 1 34