gulp入門

kycool 發布于2019-08-23 14:44 / 3408人閱讀

摘要：通過輸入文件流，將文件寫入硬盤，并輸出所有數據，能繼續向下游，所以文件流可以繼續被處理并被寫入到其他地方。如果寫入文件夾不存在，就會創建它。第二個參數，當前任務依賴的任務列表，依賴任務在當前任務運行之前完成。

gulp 簡介

用自動化構建工具增強你的工作流程。

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

利用 Node.js 流的威力，你可以快速構建項目并減少頻繁的 IO 操作。

Gulp 嚴格的插件指南確保插件如你期望的那樣簡潔高質得工作。

通過最少的 API，掌握 Gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。

gulp和webpack都是前端著名的構建工具，通過一定的配置，幾乎能實現一模一樣的功能，但是gulp在使用上與webpack不同的點是，gulp要實現什么功能是以寫腳本的方式自定義，而webpack以配置文件的方式，個人覺得通過gulp提供的方式自定義工作流更容易實現，也更透明，自己寫插件也能方便的理清楚插件什么時候被調用，需要接收和輸出什么東西。所以即使你會了webpack，學習gulp也是非常有必要的。

demo

安裝

npm i -g gulp-cli
npm i -D gulp

編寫gulpfile.js，gulp默認執行gulpfile.js文件

var gulp = require("gulp");

gulp.task("default", function (cb) {
  console.log("task default")

  cb()
})

gulp.src

讀取需要處理的文件，以便進行后續的處理。
第一個參數：匹配模式字符串或字符串數組。了解 Globs
第二個參數：可選，通過glob-stream所傳遞給node-glob的參數。
返回：Vinyl files 的 stream。通過pipe(..)將文件流向后續插件傳輸。

gulp.dest

通過pipe(..)輸入文件流，將文件寫入硬盤，并輸出所有數據，能繼續向下游pipe，所以文件流可以繼續被處理并被寫入到其他地方。如果寫入文件夾不存在，就會創建它。
第一個參數：文件被寫入的路徑
第二個參數：option.mode 默認0777 八進制權限字符串，定義輸出目錄中創建的目錄的權限；

        `option.cwd` 輸出目錄的 `cwd` 參數，只在所給的輸出目錄是相對路徑時候有效。

gulp.src("src/*.js") // 讀取src文件夾下的所有.jpg文件
  .pipe(imagemin()) // 將所有文件用imagemin處理
  .pipe(gulp.dest("dist")) // 將處理到這一步的文件寫入dist文件夾
  .pipe(minify()) // 將文件流用minify處理
  .pipe(gulp.dest("code")) // 將處理后的文件寫入code文件夾

gulp.task

定義一個任務
第一個參數：任務的名字，如果你定義的任務需要在命令行中啟動，那就不要使用空格。
第二個參數：Array，當前任務依賴的任務列表，依賴任務在當前任務運行之前完成。（gulp4已經去除）
第三個參數：fn，函數中定義任務需要執行的一些操作。

第三個參數fn可以接受一個參數，該參數接收一個callback，在函數中調用callback可以標識該任務是否執行完成。
返回一個stream或者promise，也有類似的作用。
gulp中實現任務依賴（任務并行或串行）的方法

gulp.task("one", function (cb) {
  setTimeout(() => {
    console.log(1)
    cb()
  }, 1000)
})

gulp.task("two", function (cb) {
  console.log(2)
  cb()
})

// 老版本序列化任務的方式
gulp.task("default", ["one"], function(cb){
  console.log("over")
  cb()
})

// gulp4實現串行任務的方式
gulp.task("default", gulp.series("one", "two", function(cb){
  console.log("over")
  cb()
}))
// gulp4實現并行任務的方式
gulp.task("default", gulp.parallel("one", "two", function(cb){
  console.log("over")
  cb()
}))

gulp.watch

監控文件的變化，執行相應的任務
第一個參數：要監視的glob（也可以理解成文件或文件夾）。
第二個參數：options
第三個參數：要執行的具體任務內容

gulp.watch("img", gulp.series("string"))

編寫插件

從gulp的用時方法不難看出，gulp插件接收stream，處理后返回stream，但是在插件中可能使用到其他工具，其中處理文件的數據類型可能是Buffer，所以我們經常在寫插件時用到throungh，他是一個可以Buffer和stream相互裝換的工具，下面是一個壓縮圖片的插件例子。
images庫是一個能處理圖片的nodejs庫，但是他的提供的api處理單張圖片，將他封裝成gulp插件，將他賦予批量處理圖片的能力，并且能和其他處理工具一起使用，方便的實現一個工作流，比如將一個文件夾中的圖片壓縮后，在將其打包成一個壓縮包。

var through = require("through2"); // Buffer和stream裝換庫
const images = require("images"); // 圖片處理庫

// 插件級別的函數（處理文件
function gulpPrefixer(options) {
  const {
    size
  } = options

  var stream = through.obj(function(file, enc, cb) {
    if (file.isBuffer()) {
      
      file.contents = images(file.contents)
        .size(size)
        .encode("png")
    }

    // 確保文件進入下一個 gulp 插件
    this.push(file);

    // 告訴 stream 引擎，我們已經處理完了這個文件
    cb();
  });

  // 返回文件 stream
  return stream;
};

// 導出插件主函數
module.exports = gulpPrefixer;

作者簡介：葉茂，蘆葦科技web前端開發工程師，代表作品：口紅挑戰網紅小游戲、蘆葦科技官網。擅長網站建設、公眾號開發、微信小程序開發、小游戲、公眾號開發，專注于前端框架、服務端渲染、SEO技術、交互設計、圖像繪制、數據分析等研究。

歡迎和我們一起并肩作戰： web@talkmoney.cn
訪問 www.talkmoney.cn 了解更多

GPU云服務器云服務器 gulp gulp4 gulp 上傳cdn gulp-inject

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101070.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
20分鐘gulp快速入門

摘要：所以出現了各種前端構建化工具也應運而生等已經成為現在前端開發工程師的必備技能之一。結語今天的分享就告一段落啦希望能對大家有所幫助。在互聯網告訴發展的今天，自node出現后，我們前端也越來越大（心里美美噠~），同樣帶來的Web業務日益復雜化和多元化，模式也都想webPage模式轉向webApp模式，拼幾個頁面搞幾個jquery的插件就能搞一個完成一個項目的日子已經是很久遠的曾經了，而且...

RichardXG 2019-08-22 15:06 評論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