gulp创建默认任务（九）

总述：

在前面几张的讲解中我们逐步讲解了gulp概念，如果给本地做gulp配置，gulp常用的API，gulp打

包html, 打包css， 打包sass， 打包js，以及将lib, fonts, images, videos, audios转移到dist目录

下，在完成了以上的配置之后，我们如果要打包某一类文件需要分别的执行：

gulp cssHandler
gulp jsHandler
gulp htmlHandler
gulp audiosHandler
........

这样下来，会导致操作繁琐，所以接下来的重点就是创建一个默认任务，输入一个gulp指令，直接

执行以上的所有内容。

创建默认任务的两种方式：

// 方式1：
gulp.task('default', () => {})

// 方式2：
module.exports.default = () => {}

说明：为了简化后面的工作，个人建议我们在创建默认任务的时候使用第二种方式来创建默认任务

原因：

正常情况下我们使用gulp指令的时候应该是gulp 任务名称；

当我们有一个叫做default的任务名称的时候，我们可以直接执行gulp命令，它会自动去指定咱们的

gulpfile.js文件中的default任务

何为默认任务

概念：默认任务的作用就是把所有的任务一起执行；

为实现该功能可以使用gulp.series( )或者是gulp.parallel( );

以上两个方法的返回值是一个函数，返回值可以直接被当做任务函数使用；

最终实现的结果如下：

// 书写gulp配置文件
// 0. 导入第三方
// 0-1.导入gulp
const gulp = require('gulp')
// 0-2.导入gulp-cssmin
const cssmin = require('gulp-cssmin')
// 0-3.导入gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer')
// 0-4.导入gulp-sass
const sass = require ( 'gulp-sass' ) ( require ( 'sass' ) )
// 0-5.导入gulp-uglify
const uglify = require('gulp-uglify')
// 0-6.导入es6转es5的插件gulp-babel
const babel = require('gulp-babel')
// 0-7.导入gulp-htmlmin
const htmlmin = require('gulp-htmlmin')


// 1.创建任务
// 1-1.创建爱你一个打包css的任务
const cssHandler = function () {
  return gulp
    .src('./src/css/*.css') //1.找到内容
    .pipe(autoPrefixer()) // 2.自动添加前缀
    .pipe(cssmin()) // 3.压缩
    .pipe(gulp.dest('./dist/css/')) //4.放到指定目录
}

// 1-2 创建一个打包sass文件的任务
const sassHandler = async function () {
  return await gulp
    .src('./src/sass/*.scss')  //1.找到内容
    .pipe(sass()) // 2.转换scss
    .pipe(autoPrefixer()) // 3.自动添加前缀
    .pipe(cssmin()) // 4.压缩
    .pipe(gulp.dest('./dist/sass/')) //5.放到指定目录
}

// 1-3 创建一个js打包任务
const jsHandler = function () {
  return gulp
    .src('./src/js/*.js') //找到内容
    .pipe(babel({
      // gulp-babel@7写法：presets:['es2015]
      presets:['@babel/env']
    })) // es6转es5
    .pipe(uglify()) // 压缩
    .pipe(gulp.dest('./dist/js/')) //放到指定目录
}

// 1-4创建一个html打包任务
const htmlHandler = function () {
  return gulp
    .src('./src/pages/*.html')
    .pipe(htmlmin({ // 通过配置的参数进行压缩
      collapseWhitespace:true, //移出空格
      removeEmptyAttributes:true, //表示移出空的属性（仅限于原生属性）
      collapseBooleanAttributes:true, // 移出布尔值属性
      removeAttributeQuotes:true, // 移出属性上的双引号
      minifyCSS:true, //压缩内嵌式css代码（只能基本压缩，不能添加前缀）
      minifyJS:true, // 压缩内嵌式js代码（只能基本压缩，不能进行转码）
      removeStyleLinkTypeAttributes:true,//移出style和link标签上的type属性
      removeScriptTypeAttributes:true, // 移出script标签上默认的type属性
    }))
    .pipe(gulp.dest('./dist/pages/'))
} 

// 1-5.创建一个image打包任务
const imageHandler = function () {
  return gulp
    .src('./src/images/**') // 找到images下所有文件
    .pipe(gulp.dest('./dist/images/')) //放到指定目录
}

// 1-6.创建一个videos打包任务
const videoHandler = function () {
  return gulp
    .src('./src/videos/**') // 找到videos下所有文件
    .pipe(gulp.dest('./dist/videos')) //放到指定目录
}

// 1-7.创建一个audios打包任务
const audiosHandler = function () {
  return gulp
    .src('./src/audios/**') // 找到audios下所有文件
    .pipe(gulp.dest('./dist/audios/')) //放到指定目录
}

// 1-8.创建一个lib打包任务
const libHandler = function () {
  return gulp
    .src('./src/lib/**/*') //找到lib目录下所有子目录里面的所有文件
    .pipe(gulp.dest('./dist/lib/')) //放到指定目录
}

// 1-9.创建一个fonts打包任务
const fontsHandler = function () {
  return gulp
    .src('./src/fonts/**/*') //找到fonts目录下所有子目录里面的所有文件
    .pipe(gulp.dest('./dist/fonts/')) //放到指定目录
}

// 2.导出任务
// 2-1.导出打包的css的任务
module.exports.cssHandler = cssHandler
// 2-2.导出打包的sass任务
module.exports.sassHandler = sassHandler
// 2-3.导出打包的js任务
module.exports.jsHandler = jsHandler
// 2-4.导出打包的html任务
module.exports.htmlHandler = htmlHandler
// 2-5.导出打包的image任务
module.exports.imageHandler = imageHandler
// 2-6.导出打包的videos任务
module.exports.videoHandler = videoHandler
// 2-7.导出打包的audios任务
module.exports.audiosHandler = audiosHandler
// 2-8.导出打包lib任务
module.exports.libHandler = libHandler
// 2-9.导出打包fonts任务
module.exports.fontsHandler = fontsHandler

// 创建一个默认任务
module.exports.default = gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, videoHandler, audiosHandler, libHandler,fontsHandler)

注意：在创建完默认任务之后，可以直接在cmd中输入gulp就可以按照gulpfile.js中的配置打包所有

配置的文件，按照src下的目录结构生成相同的dist目录