gulp相關說明

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

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

1.當你按下ctrl+s 或切換到瀏覽器，瀏覽器將會會自動刷新

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

如果你修改的是css或less，這個less文件或css文件將會被重載而不是刷新整個頁面（這個特性在寫單頁面應用時尤為實用）

2.模板引入

考慮以下情況

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

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

    {nav{jquery選擇器,第幾個,要加的類}}
    
    jquery選擇器默認值：li，選填

    第幾個：無默認值，必填

    要加的類默認值：on，選填

    {{nav(2)}}

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

3.關于瀏覽器前綴

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

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文件以快速的進行響應式網(wǎng)頁的開發(fā)，復制文本到你的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的高度變?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;
    });
}

將會被編譯為

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

云服務器 GPU云服務器等相關說明 ecs海外主機相關問題說明 gulp gulp4

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91304.html

重讀 Gulp

摘要：當接收一個回調函數(shù)的時候，一定要注意回調函數(shù)中的參數(shù)。主要作用就是用來讀取文件或者文件夾中的數(shù)據(jù)。表示文件的名稱指的是發(fā)生的變化使用技巧的進一步使用，可以參照中文官網(wǎng)中的技巧集。 Gulp 簡介 Gulp 對現(xiàn)在的前端而言，是一個稍微老舊的工具了，但是，為了復習以前學過的內容，還是把它翻出來，放在自己的博客中。說不定哪天又用到了呢。需要說明的是，這里使用的 Gulp 版本是 3.9....

vpants 2019-08-22 11:19 評論0 收藏0
gulp排除已壓縮文件思路

摘要：默認排除語法的弊端有個時候我們需要時用排除已經(jīng)壓縮過的，等。主要用兩個屬性來描述文件，它們分別是路徑及內容。判斷函數(shù)接受一個文件對象，返回一個值。官方例子僅壓縮符合條件的文件，丹斯所有文件包括不符合條件的都會被發(fā)送到目錄。 gulp默認排除語法的弊端有個時候我們需要時用gulp排除已經(jīng)壓縮過的js，css等。如果以壓縮文件是以.min.js之類命名規(guī)范的還好，如果不是呢？而且還有其他...

Aklman 2019-08-22 10:49 評論0 收藏0
PostCSS自學筆記（一）【安裝使用篇】

摘要：而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經(jīng)等不及安裝使用了吧。安裝及使用一般是結合自動化工具使用，如果要單獨使用可以安裝，這里我先對的安裝使用講解下。接下來說點實際的，如何利用結合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉換的工具，這些插件非常強大，強大到無所不能。其中，Autoprefixer就是眾多Post...

jsummer 2019-08-29 13:17 評論0 收藏0
如何打造一個令人愉悅的前端開發(fā)環(huán)境（一）

摘要：我覺得這方面的原因是當時對和的依賴，導致大家對的興趣不弄，錯過了最佳時機，這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過，說新的構建工具就是的構建工具。文章來源最近幾年，前端發(fā)展越來越迅速，各種萌新加入了前端這個大家庭，大有趕IOS、超Android的趨勢呀！同時，萌新們提出了各種前端工作問題，除了最基礎的html、css、js三板斧之外，最讓人頭疼的應...

KavenFan 2019-08-02 16:21 評論0 收藏0
如何打造一個令人愉悅的前端開發(fā)環(huán)境（一）

摘要：我覺得這方面的原因是當時對和的依賴，導致大家對的興趣不弄，錯過了最佳時機，這個其實跟百度自己的的技術棧有很大關系。這個阮一峰對于前端構建的變化吐槽過，說新的構建工具就是的構建工具。文章來源最近幾年，前端發(fā)展越來越迅速，各種萌新加入了前端這個大家庭，大有趕IOS、超Android的趨勢呀！同時，萌新們提出了各種前端工作問題，除了最基礎的html、css、js三板斧之外，最讓人頭疼的應...

Yangyang 2019-08-22 11:01 評論0 收藏0