成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端從零單排之Gulp(第二期)

xiaolinbang / 1241人閱讀

摘要：是個類似于的前端工作流工具，今天就簡單的介紹一下和一些我的使用感受在中安裝全局切換到你的前端工作目錄下確保你的前端工作目錄下有這個文件然后就已經(jīng)安裝好了，馬上就可以進入簡單的配置了。但是在使用的工作之中會遇到一些問題。

gulp 是個類似于grunt的前端工作流工具，今天就簡單的介紹一下gulp和一些我的使用感受

Installing gulp

在Terminal中安裝全局gulp

npm install -g gulp

切換到你的前端工作目錄下

npm install gulp --save-dev

  
Tips: 確保你的前端工作目錄下有package.json這個文件

然后gulp就已經(jīng)安裝好了，馬上就可以進入簡單的配置了。

Simple 
// Include gulp
var gulp = require("gulp");

// Include plugins
var less = require("less");

// Register task
gulp.task("less", function(){
  gulp.src("src/less/*.less")
      .pipe(less())
      .pipe("dest/css/main.css");
})
// Task default
gulp.task("default", function(){
    gulp.run("less");
})

以上即是gulp的簡單例子了，相比于grunt的配置，只能說真心簡單了好幾個數(shù)量級。

Install gulp plugins

Less compile (gulp-less)

Autoprefixer (gulp-autoprefixer)

Minify CSS (gulp-minify-css)

JSHint (gulp-jshint)

Concatenation (gulp-concat)

Uglify (gulp-uglify)

Compress images (gulp-imagemin)

LiveReload (gulp-livereload)

Clean files for a clean build (gulp-clean)

Caching of images so only changed images are compressed (gulp-cache)

Notify of changes (gulp-notify)

  
Tips: 每個gulp plugin 使用方法可在https://www.npmjs.org/package/gulp-，即為你要插件，如 https://www.npmjs.org/package/gulp-less 就是gulp-less的使用方法

gulp零零碎碎介紹的就這些了，想了解如何使用coffee配置gulp文件，以及比較復(fù)雜gulp流配置的可以參考下面參考文章中的gulpjs 配置文件。

  
使用心得：使用gulp近10來天的時間，感覺相對于grunt來說gulp的任務(wù)配置這塊完全完勝，而且現(xiàn)在gulp目前的插件也完全能滿足工作的需求。但是在使用gulp的工作之中會遇到一些問題。首先gulp是基于stream工作的，一旦出錯就需要人肉重新啟動。

以上即全文，希望對大家能有幫助。

參考文章

gulpjs 中文簡介

gulpjs 配置文件

getting started with gulpjs

gulpjs API

gulpjs plugins list

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87532.html

相關(guān)文章

  • 從零單排之CSS3

    摘要：概覽大法好今夜秋風(fēng)陣陣，霧霾層層。布局選擇多媒體，字體響應(yīng)就是屌。說起來條目繁多，乍看之下與之前比起來復(fù)雜了好多。圓角指的即使一般正式的寫法為效果請看任意一個按鈕即可寫到此處不禁跟大家說，最好還是配合預(yù)編譯來寫。 CSS3 概覽 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好 今夜秋風(fēng)陣陣，霧霾層層。不禁讓人想作詩，不過...

    劉福 評論0 收藏0

  • 前端從零單排之AJAX(第一期)

    摘要：作為一個有追求的前端，這是不可以接受的。兩大特性在不刷新頁面的情況下向服務(wù)器端發(fā)送請求從服務(wù)器端接收數(shù)據(jù)，并進行對應(yīng)的邏輯處理請求流程首先先建立一個異步請求對象第一步的對象設(shè)置已經(jīng)好了。在閉包中進行相關(guān)的操作。 ajax的使用一直是以jQuery為主，對于底層的實現(xiàn)有點不明覺厲。作為一個有追求的前端，這是不可以接受的。便讓我們今晚好好走進ajax的內(nèi)心世界。 ajax 兩大特性： ...

    Mertens 評論0 收藏0

  • 前端從零單排之LESS（第四期)

    摘要：函數(shù)更多的用處在于封裝一些需要加前綴的屬性，或是多個參數(shù)的屬性，同時命名一定要足夠的語義化。適當(dāng)嵌套，以保持的優(yōu)雅。有時要考慮兼容性，需要避免編譯某條屬性，方法即在值的前面加一個符號具體如下安裝同時推薦在線編譯網(wǎng)站，能夠?qū)崟r看到效果。 LESS 是一門CSS預(yù)編譯語言，猶記得當(dāng)初打算使用CSS預(yù)編譯語言的時候，可選的有SASS、LESS、Stylus三門，剛好那個時候在學(xué)習(xí)bootst...

    Drummor 評論0 收藏0

  • 閱讀gulp源碼小結(jié)

    摘要：源碼簡介源碼核心部分寥寥行。同時本身是直接繼承于模塊。寫在末尾閱讀代碼的這一次，是我第一次閱讀這種開源的模塊化項目。深深的被震撼到了，認識到了模塊化的巨大力量。就能完成非常復(fù)雜的事情，而不需要凡是親力親為，一行行代碼，一個個小問題依次解決。 gulp源碼簡介 gulp源碼核心部分寥寥60+行。但是通過這60+行代碼，gulp給我們帶來的確是前端自動化構(gòu)建的便利。以往以為其源碼肯定蠻復(fù)雜...

    Rocture 評論0 收藏0

  • 從零開始單排學(xué)設(shè)計模式「UML類圖」定級賽

    摘要：從零開始單排學(xué)設(shè)計模式的國服排位之旅，今天正式開啟目前段位定級賽這篇文章來總結(jié)下類圖，本來不打算講類圖的，因為我在學(xué)習(xí)設(shè)計模式的時候，一遇到有關(guān)的就會自動忽略，一看感覺就很復(fù)雜。關(guān)聯(lián)關(guān)系用實現(xiàn)箭頭來表示。 閱讀本文大概需要 3.5 分鐘。 本篇是設(shè)計模式系列的開篇，雖然之前也寫過相應(yīng)的文章，但是因為種種原因后來斷掉了，而且發(fā)現(xiàn)之前寫的內(nèi)容也很渣，不夠系統(tǒng)。 所以現(xiàn)在打算重寫，加上距離現(xiàn)...

    Loong_T 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<