gulp入門

kycool 發(fā)布于2019-08-23 14:44 / 3416人閱讀

摘要：通過輸入文件流，將文件寫入硬盤，并輸出所有數(shù)據(jù)，能繼續(xù)向下游，所以文件流可以繼續(xù)被處理并被寫入到其他地方。如果寫入文件夾不存在，就會(huì)創(chuàng)建它。第二個(gè)參數(shù)，當(dāng)前任務(wù)依賴的任務(wù)列表，依賴任務(wù)在當(dāng)前任務(wù)運(yùn)行之前完成。

gulp 簡(jiǎn)介

用自動(dòng)化構(gòu)建工具增強(qiáng)你的工作流程。

通過代碼優(yōu)于配置的策略，Gulp 讓簡(jiǎn)單的任務(wù)簡(jiǎn)單，復(fù)雜的任務(wù)可管理。

利用 Node.js 流的威力，你可以快速構(gòu)建項(xiàng)目并減少頻繁的 IO 操作。

Gulp 嚴(yán)格的插件指南確保插件如你期望的那樣簡(jiǎn)潔高質(zhì)得工作。

通過最少的 API，掌握 Gulp 毫不費(fèi)力，構(gòu)建工作盡在掌握：如同一系列流管道。

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

demo

安裝

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

編寫gulpfile.js，gulp默認(rèn)執(zhí)行gulpfile.js文件

var gulp = require("gulp");

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

  cb()
})

gulp.src

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

gulp.dest

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

        `option.cwd` 輸出目錄的 `cwd` 參數(shù)，只在所給的輸出目錄是相對(duì)路徑時(shí)候有效。

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

gulp.task

定義一個(gè)任務(wù)
第一個(gè)參數(shù)：任務(wù)的名字，如果你定義的任務(wù)需要在命令行中啟動(dòng)，那就不要使用空格。
第二個(gè)參數(shù)：Array，當(dāng)前任務(wù)依賴的任務(wù)列表，依賴任務(wù)在當(dāng)前任務(wù)運(yùn)行之前完成。（gulp4已經(jīng)去除）
第三個(gè)參數(shù)：fn，函數(shù)中定義任務(wù)需要執(zhí)行的一些操作。

第三個(gè)參數(shù)fn可以接受一個(gè)參數(shù)，該參數(shù)接收一個(gè)callback，在函數(shù)中調(diào)用callback可以標(biāo)識(shí)該任務(wù)是否執(zhí)行完成。
返回一個(gè)stream或者promise，也有類似的作用。
gulp中實(shí)現(xiàn)任務(wù)依賴（任務(wù)并行或串行）的方法

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

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

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

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

gulp.watch

監(jiān)控文件的變化，執(zhí)行相應(yīng)的任務(wù)
第一個(gè)參數(shù)：要監(jiān)視的glob（也可以理解成文件或文件夾）。
第二個(gè)參數(shù)：options
第三個(gè)參數(shù)：要執(zhí)行的具體任務(wù)內(nèi)容

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

編寫插件

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

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

// 插件級(jí)別的函數(shù)（處理文件
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")
    }

    // 確保文件進(jìn)入下一個(gè) gulp 插件
    this.push(file);

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

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

// 導(dǎo)出插件主函數(shù)
module.exports = gulpPrefixer;

作者簡(jiǎn)介：葉茂，蘆葦科技web前端開發(fā)工程師，代表作品：口紅挑戰(zhàn)網(wǎng)紅小游戲、蘆葦科技官網(wǎng)。擅長(zhǎng)網(wǎng)站建設(shè)、公眾號(hào)開發(fā)、微信小程序開發(fā)、小游戲、公眾號(hào)開發(fā)，專注于前端框架、服務(wù)端渲染、SEO技術(shù)、交互設(shè)計(jì)、圖像繪制、數(shù)據(jù)分析等研究。

歡迎和我們一起并肩作戰(zhàn)： [email protected]
訪問 www.talkmoney.cn 了解更多

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

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

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

登陸后可評(píng)論

0條評(píng)論

kycool

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

MLC測(cè)試工具

閱讀 2284·2021-11-16 11:44
基礎(chǔ)知識(shí)：css3核心知識(shí)整理

閱讀 652·2019-08-30 15:55
2017前端性能優(yōu)化清單

閱讀 3287·2019-08-30 15:52
bootstrap，datetimepicker日期時(shí)間選擇器-限制時(shí)間段，以及中文顯示問題

閱讀 3625·2019-08-30 15:43
十分鐘通關(guān)CSS：內(nèi)嵌樣式

閱讀 2208·2019-08-30 11:21
面試前端時(shí)遇到的CSS題目

閱讀 446·2019-08-29 12:18
bootstrap

閱讀 1959·2019-08-26 18:15
如果獲取籃球聯(lián)賽數(shù)據(jù)？

閱讀 483·2019-08-26 10:32

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

gulp入門

相關(guān)文章

**簡(jiǎn)簡(jiǎn)單單學(xué)習(xí)gulp的入門與使用**

gulp 入門配置

**20分鐘gulp快速入門**

Glup快速入門整理

Glup快速入門整理

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

0條評(píng)論

kycool

男|高級(jí)講師

TA的文章

MLC測(cè)試工具

基礎(chǔ)知識(shí)：css3核心知識(shí)整理

2017前端性能優(yōu)化清單

bootstrap，datetimepicker日期時(shí)間選擇器-限制時(shí)間段，以及中文顯示問題

十分鐘通關(guān)CSS：內(nèi)嵌樣式

面試前端時(shí)遇到的CSS題目

bootstrap

如果獲取籃球聯(lián)賽數(shù)據(jù)？

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

gulp入門

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！