国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

xiaolinbang / 1231人閱讀

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

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

Installing gulp

在Terminal中安裝全局gulp

npm install -g gulp

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

npm install gulp --save-dev

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

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

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的配置，只能說真心簡單了好幾個(gè)數(shù)量級(jí)。

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: 每個(gè)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來天的時(shí)間，感覺相對于grunt來說gulp的任務(wù)配置這塊完全完勝，而且現(xiàn)在gulp目前的插件也完全能滿足工作的需求。但是在使用gulp的工作之中會(huì)遇到一些問題。首先gulp是基于stream工作的，一旦出錯(cuò)就需要人肉重新啟動(dòng)。

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

參考文章

gulpjs 中文簡介

gulpjs 配置文件

getting started with gulpjs

gulpjs API

gulpjs plugins list

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

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

相關(guān)文章

  • 從零單排之CSS3

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

    劉福 評(píng)論0 收藏0

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

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

    Mertens 評(píng)論0 收藏0

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

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

    Drummor 評(píng)論0 收藏0

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

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

    Rocture 評(píng)論0 收藏0

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

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

    Loong_T 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<