（38）Gulp任务完整组合写法

 一、Gulp任务完整组合写法介绍

我们把less文件编译，CSS代码压缩，JS代码压缩，文件重命名，图片压缩，目录删除的任务都创建好了，那么如果我们一个一个单个去进行执行任务命令，太麻烦了，需要写很多条命令，那么我们可以通过组合写法，把这些多个任务名写在一起，存到常量中，常量是存储数据的容器，我们执行常量名即可实现多条

const {src,dest,parallel,series} = require('gulp')
const less = require('gulp-less')
const cleancss = require('gulp-clean-css')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')
const imagemin = require('gulp-imagemin')
//声明样式构建任务
const style = () => {
  //.pipe可以写多个，但是要注意书写顺序哦 滴~
  return src('src/styles/main.less',{ base: 'src'})
  .pipe(less())
  .pipe(autoprefixer())
  .pipe(cleancss())
  .pipe(rename({ 'extname': '.min.css'}))
  .pipe(dest('dist'))
}
//声明脚本构建任务
const script = () => {
  return src('src/scripts/main.js')
  .pipe(babel({
    presets: ['babel-preset-env']
  }))
  .pipe(uglify())
  .pipe(rename({ 'extname': '.min.js'}))
  .pipe(dest('dist/scripts'))
}
//声明页面构建任务
const html = () => {
  return src('./index.html')
  .pipe(htmlmin({
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true
  }))
  .pipe(dest('dist'))
}
//声明图片文件构建任务
const image = () => {
  return src('src/images/**',{ base:'src' })
  .pipe(imagemin(
    [imagemin.mozjpeg({quality: 75, progressive: true})]
  ))
  .pipe(dest('dist'))
}
const del = require('del')
//声明删除目录和文件构建任务
const dele = () => {
  return del(['dist'])
}

//任务组合写法，并行（一起执行）
const bulid = parallel(style,script,html,image)
//任务组合写法，串行（一个接一个的执行）
const dev = series(dele,bulid)
//导出
module.exports = {
  bulid,
  dev
}