party_bid第三张卡片做完后的修改（二，学习使用jade）

    Jade是一款高性能简洁易懂的模板引擎，我们可以通过使用简单的jade语句来生成对应的html语句，以此减少代码量。
    以下是我在学习使用过程中的收获：
    1.在使用jade前，先要安装jade。先进入到party_bid的文件目录下，打开终端，输入：
    npm install jade --save-dev //save的作用是将程序包的信息添加到package.json中。
    2.在Gruntfile文件中加入jade命令。
    3.jade的使用规则
    先给一段jade和html的代码的对比：

 

    <header>
        活动列表
        <div class="header-right">
            <a class="btn-style btn btn-4" ng-disabled="the_create_button_is_disabled" ng-click="go_to_create_activity_page()">创建活动</a>
        </div>
    </header>

    <div id="wrapper" class="wrapper">
        <ul class="list-style-2">
            <li style="cursor:pointer" ng-repeat="current_activity in activity_list"
                ng-click="go_to_registration_page(current_activity.activity_id)">
                <h3 class="{{should_it_be_yellow(current_activity.activity_id)}}"><a>{{current_activity.activity_name}}</a></h3>
            </li>
        </ul>
    </div>

 

 

	header
  | 活动列表
  .header-right
    a.btn-style.btn.btn-4(ng-disabled='the_create_button_is_disabled', ng-click='go_to_create_activity_page()') 创建活动
#wrapper.wrapper
  ul.list-style-2
    li(style='cursor:pointer', ng-repeat='current_activity in activity_list', ng-click='go_to_registration_page(current_activity.activity_id)')
      h3(class="{{should_it_be_yellow(current_activity.activity_id)}}")
        a {{current_activity.activity_name}}

     可以很轻易的看出来，jade比html要简洁很多，他们的转换规则也显而易见。
    1.jade中没有尖角括号，它是通过严格的缩进来表示嵌套关系的。
    2.jade中，id用#号表示，class用.表示，如果有很多个class，那就.class1.class2……。如果既不是id，又不是class，那么就要用括号（）来添加内容。如果class的内容比较复杂，也不能用.,而应该放在括号里。
    3.对于有内容的div标签，div可以省掉。
    4.标签的后面有空格，之后的内容就表示显示的内容。

我的问题：
    1.--save-dev和是将信息添加到devDependencies中，--save是将信息添加到dependencies中，它们有什么区别？
         (网上找到的答案)
        配置文件区分这两部分，是用于区别开发依赖模块和产品依赖模块。devDependencies下列出的模块，是我们开发时用的，我们用它混淆js文件，它们不会被部署到生产环境。而dependencies下的模块，则是我们生产环境中所需要的依赖。江江给的通俗版解释是，dependencies里面的内容是要给服务器的，而devDependencies是在本地使用的。