Gulp使用入門

ShevaKuilin 發布于2019-08-21 10:46 / 704人閱讀

摘要：是一款流式構建系統，如果說是基于任務執行器，就是基于的文件流任務執行器，比起有如下特點使用方便通過代碼優于配置的策略，可以讓簡單的任務簡單，復雜的任務更可管理。

作者：Jogis
原文鏈接：https://github.com/yesvods/Blog/issues/1
轉載請注明原文鏈接以及作者信息

提到 Gulp，不得不說到的是較早的 JS 項目自動化構建工具——Grunt。

前端開發過程中，特別是最近幾年多了 CoffeeScript、Sass、Less 等一些預編譯語言，很多代碼每次寫完需要手動到工作目錄去編譯才能執行。此外，項目預發布時候需要進行 js、css 文件合并、壓縮、重命名等操作，實在是很繁瑣。此前很多工程師使用的是 Makefile 構建項目，但是這要求需要一定Linux基礎，而且編寫配置文件會增大非常多工作量， Grunt 的出現，解放了前端工程師的雙手=_=

Grunt 通過 CLI 配合配置文件 gruntfile.js 去完成自動化構建任務，社區有非常多的 Grunt 插件，比如 concat（合并文件）、 uglify（js壓縮），只需要在 gruntfile.js 中配置好路徑等一些參數，運行以下命令就可以自動執行。

grunt takeName

Gulp是一款 The streaming build system（流式構建系統），如果說 Grunt 是基于 gruntfile.js 任務執行器，Gulp 就是基于 NodeJS 的文件流任務執行器，比起 Grunt 有如下特點

使用方便
通過代碼優于配置的策略，Gulp 可以讓簡單的任務簡單，復雜的任務更可管理。

構建快速
通過流式操作，減少頻繁的 IO 操作，更快地構建項目。

插件高質
Gulp 有嚴格的插件指導策略，確保插件能簡單高質的工作。

易于學習
少量的API，掌握 Gulp 可以毫不費力。構建就像流管道一樣，輕松加愉快。

Gulp實現

Gulp 主要 API 為 gulp.src（使用glob模式匹配獲得文件流集）、gulp.dest（輸出gulp文件流集到指定路徑，路徑指定相對于gulpfile.js配置文件）、gulp.watch（監聽glob模式匹配的文件集，有改動時執行相應gulp任務），如圖：

orchestrator

譯作管弦樂演奏家，大多數就是一個老頭拿著個小棍的形象,就像這樣：

一個npmjs模塊，就是一個以最大并發方式去排序或執行一系列的任務。這些任務就是我們之后會用到的 Gulp 任務，比如說 css 命名的任務，里面包括css的瀏覽器前綴添加、合并、壓縮等操作。orchestrator 通過實例化一個對象，在對象上調用 add 來添加特定命名的任務、添加任務時候可以聲明任務依賴，比如：

var Orchestrator = require("orchestrator");
var orchestrator = new Orchestrator();
orchestrator.add("thing1", function(){
  // do stuff
});
orchestrator.add("thing2", function(){
  // do stuff
});
orchestrator.add("mytask", ["thing1","thing2"], function() {
  // Do stuff
});

以上代碼，添加了3個 Gulp 任務，mytask 任務依賴于 thing1 和 thing2 ，即必須執行完后面兩個任務，mytask才能執行，通過任務依賴，很容易理清和構建任務時候的執行順序。需要注意的是，在填寫 do stuff 時候，要確保其返回一個 promise 或者是 event stream（最常用），比如一個簡單的任務是這樣定義的：

var map = require("map-stream");

orchestrator.add("thing4", function(){
  var stream = map(function (args, cb) {
    cb(null, args);
  });
  // do stream stuff
  return stream;
});

或則是返回一個 promise：

var Q = require("q");

orchestrator.add("thing3", function(){
  var deferred = Q.defer();

  // do async stuff
  setTimeout(function () {
    deferred.resolve();
  }, 1);

  return deferred.promise;
});

orchestrator 調用 start 來執行特定名稱的任務，可一次執行多個：

orchestrator.start("one", "two");

以上兩個是 orchestrator 最常用的用于實現 Gulp 的函數，除此之外，還有任務檢測，任務暫停，任務事件監聽，想詳細了解可訪問npmjs：https://www.npmjs.org/package/orchestrator

vinyl-fs

這是 Gulp 采用的一個虛擬文件系統，可以讀取 glob 模式匹配到的文件并轉成文件流，可以獲取文件流并轉成文件集。其中 vinyl-fs 使用 vinyl 虛擬文件描述類，來對 glob 匹配到的文件進行描述，所謂的描述，只是簡單的文件名與路徑，以及文件內容，可以說是一個文件的封裝，可以看看 vinyl 是如何描述一個或一組文件的：

var File = require("vinyl");

var coffeeFile = new File({
  cwd: "/",
  base: "/test/",
  path: "/test/file.coffee",
  contents: new Buffer("test = 123")
});

除了 vinyl ，vinyl-fs 還需要依賴 glob-stream 讀寫文件流，如圖：

glob-stream

大家可能有疑問，讀寫文件流，為什么不用 nodejs 內核的 steam 類來讀寫呢，騷安勿燥，Gulp 既然是基于 nodejs 構建，最終自然也是依賴 nodejs 內核實現它的功能的。

只是，stream 類讀取文件流只針對一個文件路徑，glob-stream 就是實現從獲取 glob 模式匹配文件集，到轉換成文件路徑，再到讀取，還是有一段距離的。如圖：

glob-stream 通過 minimatch 來進行 glob 模式匹配，通過其他路徑模塊，獲得一組文件路徑，然后就是 ordered-read-streams 發光發熱時候啦，對這組文件路徑一個個地讀啊，然后就獲得一組文件流啦。

好啦，終于分析完 Gulp 的實現，通過對其中模塊的閱讀，其實 Nodejs 模塊有點像樂高積木，內核給出的就是最基本的積木啦，不過你可以無限次使用它們，來堆出一個個小的物體，通過小小的物體組合，來組成非常徇麗多姿的樂高作品啦~

當然，也是有一些 c++ 實現的nodejs模塊，主要是用于一些需要高性能運算的地方，不過npmjs.org上介紹到的模塊，大部分的依賴都是基于 nodejs 內核實現滴。

GPU云服務器云服務器 gulp hbase入門與使用 gulp4 gulp 上傳cdn

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

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

簡簡單單學習gulp的入門與使用

摘要：的使用首先，我們需要在官網下載插件，地址如下在這個網站我們可以尋找到自己需要的插件以為例，然后在項目下打開命令提示行，輸入以下命令然后我們在里輸入一下代碼引入插件調用插件輸出位置 gulp的入門與使用安裝使用 gulp的入門安裝安裝gulp需要使用到nodo.js,安裝鏈接如下：http://jingyan.baidu.com/arti... 安裝完成之后我們以全局安裝gu...

meteor199 2019-08-22 10:54 評論0 收藏0
gulp 入門配置

摘要：使用進行本地開發自動刷新，配合對和進行壓縮處理，最終打包到目錄安裝以及其他插件代碼示例安裝依賴本地安裝所用到的地方同步執行任務獲取組件是否開啟瀏覽器提示端口監聽目錄下所有文件清楚目錄下所有文件定使用 browser-sync 進行本地開發自動刷新，配合gulp-uglify、gulp-minify-css對js和css進行壓縮處理，最終打包到dist目錄安裝gulp 以及其他插件 ...

AlienZHOU 2019-08-20 18:36 評論0 收藏0
gulp入門

摘要：通過輸入文件流，將文件寫入硬盤，并輸出所有數據，能繼續向下游，所以文件流可以繼續被處理并被寫入到其他地方。如果寫入文件夾不存在，就會創建它。第二個參數，當前任務依賴的任務列表，依賴任務在當前任務運行之前完成。 gulp 簡介用自動化構建工具增強你的工作流程。通過代碼優于配置的策略，Gulp 讓簡單的任務簡單，復雜的任務可管理。利用 Node.js 流的威力，你可以快速構建項目并...

kycool 2019-08-23 14:44 評論0 收藏0
Glup快速入門整理

摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器能自動化...

HmyBmny 2019-08-20 18:12 評論0 收藏0
Glup快速入門整理

摘要：下載打包插件引入引入的插件是個方法，必須記住調用。神來之筆其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名統一為插件的功能名字即插件名字的最后一部分如將轉換為將轉換為的文件輸出到下實時刷新 Gulp介紹中文主頁: http://www.gulpjs.com.cn/ gulp是與grunt功能類似的前端項目構建工具, 也是基于Nodejs的自動任務運行器能自動化...

jhhfft 2019-08-29 12:58 評論0 收藏0