const gulp = require('gulp'),
        htmlmin = require('gulp-htmlmin'),
        uglify = require('gulp-uglify'),
        babel = require('gulp-babel'),
        cleanCss = require('gulp-clean-css'),
        connect = require('gulp-connect'),
        del = require('del'),
        sass = require('gulp-sass')
        
// 把所有要处理的文件的源路径和目标路径做一个统一的规划
const paths = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    js: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    css: {
        src: 'src/css/**/*.scss',
        dest: 'dist/css'
    },
    libs: {
        src: 'src/libs/**/*',
        dest: 'dist/libs'
    },
    img: {
        src: 'src/images/**/*',
        dest: 'dist/images'
    }
}
// 每次启动任务之前先把dist删掉
const delDist = () => del(['dist'])
// 制定html任务：把html文件压缩之后移动到dist目录里
const html = () => {
// 把src目录下的所有目录的所有html文件取出来，通过管道压缩，再放到目的地dist目录里
    return gulp.src(paths.html.src)
    .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
      })).pipe(gulp.dest('dist'))
}
// 制定js任务：把js文件取出来，先ES6转ES5，然后压缩，再放到dist里
const js = () => {
    return gulp.src(paths.js.src)
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(paths.js.dest))
    .pipe(connect.reload())
}
// 制定css任务：取出css文件，压缩，放进dist
const css = () => {
    return gulp.src(paths.css.src)
      .pipe(sass())
      .pipe(cleanCss())
      .pipe(gulp.dest(paths.css.dest))
      .pipe(connect.reload())
  }
// 制定server任务：启动一个服务器
const server = () => {
    return connect.server({
      root: 'dist',    // 服务器跟目录
      port: 9900,      // 端口号
      livereload: true // 设置支持热更新
    })
  }
// 制定libs任务：就是代码复制
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
// img任务：文件复制
const img = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))
// 监听文件的变化，进而重启对应任务
// 第一个参数是监听文件路径，第二个参数就是当有文件变化要重启的任务
gulp.watch(paths.html.src, html)
gulp.watch(paths.css.src, css)
gulp.watch(paths.js.src, js)
// 导出默认任务流，先执行删除dist任务，再开启其他任务的异步执行
// series 同步执行任务
// parallel 异步执行
module.exports.default = gulp.series(delDist, gulp.parallel(html, js, css, server, libs, img))