gulp入門

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 瞭解更多