Gulp

Posted 2021-09-13 mcgee0731

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 重命名文件转换流