前端自动化系列之jade预编译html

刚开始写这篇文章的时候;

其实我是拒绝的;

因为在 前端自动化系列(二)之less、scss、sass、stylus css预处理器 中;

我已经表明了我的态度;

我是不喜欢那种靠缩进来体现等级层次感的语法;

但是考虑到css、js都有了现代化的写法;

单单把html落下不好;或者有童鞋喜欢呢?

毕竟jade还是有一大堆的追随者的;

于是;我还是决定讲一下 Jade ;


老规矩;先安装;

cnpm install -g jade

然后创建 test.jade 文件;输入如下内容;

doctype html
html
    head
        meta(charset="UTF-8")
        title 尊氪博客
    body
        h2 这里是一讯的博客
        a#blog.blog(href="http://zunkr.com") 点击go
 
        script.
            function test() {
                alert(1);
            }
            test();


命令行运行:

jade test.jade -P

生成 test.html 文件;内容如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>尊氪博客</title>
  </head>
  <body>
    <h2>这里是一讯的博客</h2>
    <a id="blog" href="http://zunkr.com" class="blog">点击go</a>
    <script>
      function test() {
          alert(1);
      }
      test();
    </script>
  </body>
</html>

好了;又是一个看一眼就学会了的东西;


那接着写点稍微高级点的用法;

<!-- 引入其他文件 -->
include test2.jade

include 都有了;那定义变量 、循环呢?

- var data = ['祁鹏钊', '一讯'];
ul
    each val, index in data
        li= index + ': ' + val

生成:

<ul>
  <li>0: 祁鹏钊</li>
  <li>1: 一讯</li>
</ul>


那 extends 、 if 、else 等等自然一个都不能少;

好了;介绍到这;有兴趣的;官网在这: https://pugjs.org

尊氪博客

尊云CMS
请先登陆后发表评论
  • 最新评论
  • 总共1条评论
尊云CMS

独自呵呵~尊氪博客

2017-02-17 18:20:06 回复