gulp相關(guān)說(shuō)明

fevin 發(fā)布于2019-08-22 10:48 / 1858人閱讀

摘要：當(dāng)你按下或切換到瀏覽器，瀏覽器將會(huì)會(huì)自動(dòng)刷新如果你修改的是文件將會(huì)刷新網(wǎng)頁(yè)如果你修改的是或，這個(gè)文件或文件將會(huì)被重載而不是刷新整個(gè)頁(yè)面這個(gè)特性在寫單頁(yè)面應(yīng)用時(shí)尤為實(shí)用模板引入考慮以下情況我們需要?jiǎng)?chuàng)建如下的模板，并且在不同的頁(yè)面高亮不同的這時(shí)

1.當(dāng)你按下ctrl+s 或切換到瀏覽器，瀏覽器將會(huì)會(huì)自動(dòng)刷新

如果你修改的是html文件將會(huì)刷新網(wǎng)頁(yè)

如果你修改的是css或less，這個(gè)less文件或css文件將會(huì)被重載而不是刷新整個(gè)頁(yè)面（這個(gè)特性在寫單頁(yè)面應(yīng)用時(shí)尤為實(shí)用）

2.模板引入

考慮以下情況

我們需要?jiǎng)?chuàng)建如下的模板，并且在不同的頁(yè)面高亮不同的li

這時(shí)候可以在引入的時(shí)候傳入?yún)?shù) (假設(shè)這個(gè)模板名字為nav)

    {nav{jquery選擇器,第幾個(gè),要加的類}}
    
    jquery選擇器默認(rèn)值：li，選填

    第幾個(gè)：無(wú)默認(rèn)值，必填

    要加的類默認(rèn)值：on，選填

    {{nav(2)}}

上面的模板將會(huì)被編譯為(雖然編程語(yǔ)言大部分從0開(kāi)始計(jì)數(shù)，但是這里從1開(kāi)始)

3.關(guān)于瀏覽器前綴

事實(shí)上你不需要再寫瀏覽器前綴（除了-webkit-line-clamp），auto-prefix插件會(huì)根據(jù)設(shè)置自動(dòng)添加前綴并清理掉不必要的前綴

3.less的嵌套（less詳細(xì)文檔）

通常我們給一個(gè)元素和它的子元素編寫樣式會(huì)像下面一樣，每次都要重復(fù)寫父級(jí)元素

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

在less文件里你可以這么寫，將會(huì)編譯成跟上面一樣的內(nèi)容

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

4.媒體查詢

你可以引入以下的less文件以快速的進(jìn)行響應(yīng)式網(wǎng)頁(yè)的開(kāi)發(fā)，復(fù)制文本到你的less文件開(kāi)頭或者新建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();
  }
}

在下面情況中我們希望在小屏幕的時(shí)候header的高度變?yōu)?0

.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;
    });
}

將會(huì)被編譯為

.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
    });
}

將會(huì)被編譯為

.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;
  }
}