Gulp

Gulp

Grunt安裝 yarn add gulp --dev

code gulpfile.js gulp入口文件,編寫須要gulp執行的構建任務

yarn gulp 任務名 執行gulp構建

gulpfile.js文件時gulp的入口文件

在最新的gulp中約定每一個任務都是異步任務，所以咱們須要標記任務完成經過done參數

exports.foo = done =>{
  console.log('foo task working~');

  done() //標識任務完成
}

//默認任務
exports.default = done=>{
  console.log("default task working~");
  done()
}

//gulp 4.0之前註冊一個任務經過,不推薦，推薦上面導出函數成員方式
const gulp = require('gulp')
gulp.task('bar',done=>{
  console.log('bar working~');
  done()
})

組合任務

例如編譯css和js，他們是互不干擾的，這兩個任務能夠並行處理，提升構建效率

例如部署，部署的任務須要先執行編譯任務，須要經過串行執行任務

const {series,parallel} = require('gulp')

const task1 = done =>{
  setTimeout(()=>{
    console.log('task1 working~');
    done()
  },1000)
}

const task2 = done =>{
  setTimeout(()=>{
    console.log('task2 working~');
    done()
  },1000)
}
const task3 = done =>{
  setTimeout(()=>{
    console.log('task3 working~');
    done()
  },1000)
}

exports.foo = series(task1,task2,task3) //串行依次執行

exports.bar = parallel(task1,task2,task3) //並行執行

異步任務

回調函數

exports.callback = done=>{ 
  console.log('callback task~');
  done()
}

//若是多個任務執行，後面不會再執行
exports.callback_error = done=>{
  console.log('callback_error task~');
  done(new Error('task Failed'))
}

promise

exports.promise = ()=>{
  console.log('promise task~');
  return Promise.resolve() //要返回一個promise對象
}

exports.promise_error = ()=>{
  console.log('promise_error task~');
  return Promise.reject(new Error('task Failed')) //要返回一個promise對象
}

async await node8以上

const timeout = time=>{
  return new Promise(resolve=>{
    setTimeout(resolve,time)
  })
}
exports.async = async ()=>{
  await timeout(1000)
  console.log('async task~');
}

stream流的方式

const fs = require('fs')
exports.stream = ()=>{
  const readStream = fs.createReadStream('package.json') 
  const writeStream = fs.createWriteStream('temp.txt') //寫入流
  readStream.pipe(writeStream) //read經過pipe方式導入write中,相似於文件複製
  return readStream //結束的時機就是readStream END的時候,等同於下面代碼
}


exports.stream = done=>{
  const readStream = fs.createReadStream('package.json') 
  const writeStream = fs.createWriteStream('temp.txt') //寫入流
  readStream.pipe(writeStream)
  readStream.on('end',()=>{ //實質上是監聽end事件
    done()
  })
}

Gulp構建過程核心工做原理

對css壓縮，用nodeAPI實現

經過在線壓縮工具對代碼.css進行壓縮，再複製到.min.css

https://tool.oschina.net/jsco...

讀取流，轉換流，寫入流

the streaming build system 基於流的構建系統

const fs = require('fs')
const { Transform } = require('stream')

exports.default = ()=>{
  //文件讀取流
  const read = fs.createReadStream('normalize.css')

  //文件寫入流
  const write = fs.createWriteStream('normalize.min.css')
  
  //文件轉換流
  const transform = new Transform({ //
    transform:(chunk,encoding,callback)=>{ //核心轉換過程
      //核心轉換過程實現
      //chunk => 讀取流中讀到的內容（Buffer）toString轉化程字符串
      const input = chunk.toString() 
      const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')
      callback(null,output) //錯誤優先，沒有錯誤傳null
    }
  })

  //把讀取出來的文件流導入寫入文件流
  read
  .pipe(transform)
  .pipe(write)

  return read
}

Gulp 文件操做API

文件操做API+插件一塊兒使用

相比於底層nodeAPI，gulpAPI更強大，也更容易使用

轉換流通常都是經過插件提供
src().pipe(轉換流).pipe(dest(目標目錄))

const { src, dest} = require('gulp')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')

exports.default = ()=>{
  return src('src/*.css') //建立文件讀取流
    .pipe(cleanCss())
    .pipe(rename({extname:'.min.css'})) //重命名擴展名
    .pipe(dest('dist'))  //導出到dest寫入流中  參數寫入目標目錄
}
//yarn gulp    文件dist下多出一個css
//相比於nodeapi，gulp更強大，能夠添加通配符
//yarn add gulp-clean-css --dev 壓縮css代碼的轉換流
//yarn add gulp-rename --dev 重命名文件轉換流