前端知识点——Gulp

写在前面

笔记内容大多出自于拉勾教育大前端高薪训练营的教程，因此也许会和其他文章雷同较多，请担待。

• 认识gulp的任务

// gulp入口文件
exports.foo = done => { // yarn gulp foo
  console.log('gulp working foo')
  done() // 表示任务完成
}
exports.default = done => { // yarn gulp
  console.log('gulp working default')
  done() // 表示任务完成
}

// 组合任务
const { series, parallel } = require('gulp')
const task1 = done => {
  setTimeout(() => {
    console.log('task1 working')
    done()
  }, 3000)
}
const task2 = done => {
  setTimeout(() => {
    console.log('task2 working')
    done()
  }, 2000)
}
const task3 = done => {
  setTimeout(() => {
    console.log('task3 working')
    done()
  }, 1000)
}
/* 虽然输出相同，但是执行顺序是不同的 */
exports.seriesTask = series(task1, task2, task3) // 串行，依次执行task1 task2 task3，如果是异步任务，则会等异步全部执行完才会走下一个任务
exports.parallelTask = parallel(task1, task2, task3) // 并行，同时执行task1 task2 task3，根据计时器来确定输出

// 异步任务
exports.error = done => { // yarn gulp error -> next will error -> Error: start error
  console.log('next will error')
  done(new Error('start error')) // done函数内部错误优先，错误的回调放在arguments[0]，如果是串行任务，下面的任务就不会继续执行，并行任务不受影响
}
/* 使用promise */
exports.promise = () => { // yarn gulp promise -> gulp with Promise
  console.log('gulp with Promise')
  return Promise.resolve()
}
exports.promise_error = () => { // yarn gulp promise_error -> Error: promise rejected
  console.log('gulp with Promise')
  return Promise.reject(new Error('promise rejected'))
}
/* 使用async/await */
exports.async = async () => { // yarn gulp async -> gulp with async
  await setTimeout(() => {
    console.log('gulp with async')
  }, 1000)
}
/* 使用stream */
const fs = require('fs')
exports.stream = () => {
  const readFile = fs.createReadStream('package.json')
  const writeFile = fs.createWriteStream('test.txt')
  readFile.pipe(writeFile)
  /* 
  因为内部会自动注册一个end事件调用done，所以可以直接将readFile返回出去
  readFile.on('end', () => {
    done()
  })
  */
  return readFile
}

• 认识gulp文件流

const fs = require('fs')
const { Transform } = require('stream')
exports.default = () => {
  const readStream = fs.createReadStream() // 读取流
  const transform = new Transform({ // 转换流
    transform(chunk, encoding, callback) {
      const input = chunk.toString() // 获取文件内容
      const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '') // 删除空格和/*  */格式注释
      callback(null, output) // callback错误优先，所以要把output放在第二位
    }
  })
  const writeStream = fs.createWriteStream() // 输出流
  readStream
    .pipe(transform)
    .pipe(writeStream)
  return readStream
}

• 认识gulpAPI和插件操作文件

const { src, dest } = require('gulp') // gulp自带的文件读取写入流
const cleanCss = require('gulp-clean-css') // yarn add gulp-clean-css --dev
exports.default = () => {
  return src('src/assets/style/*.css', { base: 'src' }) // 使用通配符可以批量操作，base可以使dist里面也生成assets/styles文件夹，并且将文件放进去
    .pipe(cleanCss()) // 格式化css代码
    .pipe(dest('dist')) // 将src文件夹下面的所有css文件放到dist文件夹下面
}

• 实现一个完整的gulp打包

// 实现这个项目的构建任务
const { src, dest, series, parallel, watch } = require('gulp')
const del = require('del')
const loadPlugins = require('gulp-load-plugins')
const browserSync = require('browser-sync').create()
const plugin = loadPlugins()

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}
const paths = {
  style: 'src/assets/styles/*.scss',
  script: 'src/assets/scripts/*.js',
  html: 'src/*.html',
  image: 'src/assets/images/**',
  font: 'src/assets/fonts/**',
  extra: 'public/**',
}
const clean = () => {
  return del(['dist', 'temp'])
}
const complete = () => {
  return del(['temp'])
}
const style = () => {
  return src(paths.style, { base: 'src' })
    .pipe(plugin.sass())
    .pipe(dest('temp'))
    .pipe(browserSync.reload({ stream: true }))
}
const script = () => {
  return src(paths.script, { base: 'src' })
    .pipe(plugin.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(browserSync.reload({ stream: true }))
}
const html = () => {
  return src(paths.html, { base: 'src' })
    .pipe(plugin.swig({ data, cache: false }))
    .pipe(dest('temp'))
    .pipe(browserSync.reload({ stream: true }))
}
const image = () => {
  return src(paths.image, { base: 'src' })
    .pipe(plugin.imagemin())
    .pipe(dest('dist'))
}
const font = () => {
  return src(paths.font, { base: 'src' })
    .pipe(plugin.imagemin())
    .pipe(dest('dist'))
}
const extra = () => {
  return src(paths.extra, { base: 'public' })
    .pipe(dest('dist'))
}
const useref = () => {
  return src('temp/*.html', { base: 'temp' })
    .pipe(plugin.useref({ searchPath: ['temp', '.'] }))
    .pipe(plugin.if(/\.js$/, plugin.uglify()))
    .pipe(plugin.if(/\.css$/, plugin.cleanCss()))
    .pipe(plugin.if(/\.html$/, plugin.htmlmin({
      minifyCSS: true,
      minifyJS: true,
      collapseWhitespace: true
    })))
    .pipe(dest('dist'))
}
const delelop = () => {
  watch(paths.style, style)
  watch(paths.script, script)
  watch(paths.html, html)
  watch([
    paths.image,
    paths.font,
    paths.extra,
  ], browserSync.reload)
  browserSync.init({
    notify: false,
    port: 8080,
    open: false,
    server: {
      baseDir: ['temp', 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}
const compile = parallel(style, script, html)
const serve = series(clean, compile, delelop)
const build = series(clean, parallel(series(compile, useref), clean, image, font, extra), complete)
module.exports = {
  clean,
  serve,
  build
}