gulp相关说明

1.当你按下ctrl+s 或切换到浏览器，浏览器将会会自动刷新

• 如果你修改的是html文件将会刷新网页

• 如果你修改的是css或less，这个less文件或css文件将会被重载而不是刷新整个页面（这个特性在写单页面应用时尤为实用）

2.模板引入

考虑以下情况

我们需要创建如下的模板，并且在不同的页面高亮不同的li

<nav>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li><a href="">6</a></li>
    </ul>
</nav>

这时候可以在引入的时候传入参数 (假设这个模板名字为nav)

    {nav{jquery选择器,第几个,要加的类}}
    
    jquery选择器默认值：li，选填

    第几个：无默认值，必填

    要加的类默认值：on，选填

    {{nav(2)}}

上面的模板将会被编译为(虽然编程语言大部分从0开始计数，但是这里从1开始)

<nav>
    <ul>
        <li><a href="">1</a></li>
        <li class="on"><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li><a href="">6</a></li>
    </ul>
</nav>

3.关于浏览器前缀

事实上你不需要再写浏览器前缀（除了-webkit-line-clamp），auto-prefix插件会根据设置自动添加前缀并清理掉不必要的前缀

3.less的嵌套（less详细文档）

通常我们给一个元素和它的子元素编写样式会像下面一样，每次都要重复写父级元素

.banner {
  height: 20px;
}
.banner ul {
  color: red;
}
.banner li {
  color: blue;
}
.banner li a {
  font-size: 14px;
}

在less文件里你可以这么写，将会编译成跟上面一样的内容

.banner{
    height: 20px;
    ul{
        color:red;
    }
    li{
        color:blue;
        a{
            font-size: 14px;
        }
    }
}

4.媒体查询

你可以引入以下的less文件以快速的进行响应式网页的开发，复制文本到你的less文件开头或者新建less文件到less文件夹均可

@lg:1200px;
@md:992px;
@sm:768px;
@xs:480px;

.max(@screenWidth,@rules){
  @media screen and (max-width:@screenWidth){
    @rules();
  }
}
.min(@screenWidth,@rules){
  @media screen and (min-width:@screenWidth){
    @rules();
  }
}

.lg(@rules) {
  @media screen and (max-width:@lg) {
    @rules();
  }
}
.md(@rules) {
  @media screen and (max-width: @md) {
    @rules();
  }
}
.sm(@rules) {
  @media screen and (max-width: @sm) {
    @rules();
  }
}
.xs(@rules) {
  @media screen and (max-width: @xs) {
    @rules();
  }
}

在下面情况中我们希望在小屏幕的时候header的高度变为20

.header{
    font-size: 18px;
    color:red;
    width: 100%;
    height: 30px;

}

只需要加上.sm({height: 20px;})

.header{
    font-size: 18px;
    color:red;
    width: 100%;
    height: 30px;
    .sm({
        height: 20px;
    });
}

将会被编译为

.header {
  font-size: 18px;
  color: red;
  width: 100%;
  height: 30px;
}
@media screen and (max-width: 768px) {
  .header {
    height: 20px;
  }
}

下面是更多例子

.hedaer{
    font-size: 18px;
    color:red;
    width: 100%;
    height: 30px;

    .md({
        font-size: 16px;
        height: 25px;
    });

    .sm({
        font-size: 14px;
        height: 20px;
    });

    .max(320px,{
        font-size: 16px;
        height: 15px;
    });

    .min(320px,{
        box-shadow: 5px 5px 5px red
    });
}

将会被编译为

.hedaer {
  font-size: 18px;
  color: red;
  width: 100%;
  height: 30px;
}
@media screen and (max-width: 992px) {
  .hedaer {
    font-size: 16px;
    height: 25px;
  }
}
@media screen and (max-width: 768px) {
  .hedaer {
    font-size: 14px;
    height: 20px;
  }
}
@media screen and (max-width: 320px) {
  .hedaer {
    font-size: 16px;
    height: 15px;
  }
}
@media screen and (min-width: 320px) {
  .hedaer {
    box-shadow: 5px 5px 5px red;
  }
}