//gulpfile.js
const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      autoprefixer = require('gulp-autoprefixer'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      del = require('del'),
      connect = require('gulp-connect'),
    //   { createProxyMiddleware } = require('http-proxy-middleware'),
      sass = require('gulp-sass')

// 提前规划所有文件的路径
const paths = {
    html: {
      src: 'src/**/*.html',
      dest: 'dist'
    },
    css: {
      src: 'src/css/**/*.scss',
      dest: 'dist/css'
    },
    js: {
      src: 'src/js/**/*.js',
      dest: 'dist/js'
    },
    images: {
      src: 'src/images/**',
      dest: 'dist/images'
    },
    libs: {
      src: 'src/libs/**',
      dest: 'dist/libs'
    },
    ico: {
        src:'src/**/*.ico',
        dest:'dist'
    }
}

//删除dist目录
const delDist = () => del('dist')

const html = () =>{
    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(paths.html.dest))
        .pipe(connect.reload())
}

//css
const css = () =>{
    return gulp.src(paths.css.src)
        .pipe(sass())
        .pipe(autoprefixer({
            cascade: false
        }))
        // .pipe(cleanCss())
        .pipe(gulp.dest(paths.css.dest))
        .pipe(connect.reload())
}

//js任务：先ES6转成ES5，再压缩
const js = () =>{
    return gulp.src(paths.js.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(paths.js.dest))
        .pipe(connect.reload())
}

//images
const images = () =>{
    return gulp.src(paths.images.src).pipe(gulp.dest(paths.images.dest))
}

//libs
const libs = () =>{
    return gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
}

const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))

//server
const server = ()=>{
    connect.server({
        root:'dist',
        port:2333,
        livereload:true,
        // middleware(){
        //     return [
        //         createProxyMiddleware('/api',{
        //             target: 'https://apiv2.pinduoduo.com',
        //             changeOrigin: true
        //         })
        //     ]
        // }
    })
}

//watch
const watch = () =>{
    gulp.watch(paths.html.src,html)
    gulp.watch(paths.css.src,css)
    gulp.watch(paths.js.src,js)
}

// 把制定好的任务导出
// 这种写法是把各个任务单独导出，只能单个执行
// module.exports = {
//     html,
//     css,
//     js,
//     images,
//     libs
// }

// parallel：异步执行任务
// series：同步执行任务
// 导出defult这一个任务，在这个任务里先同步执行删除dist的任务，再异步的执行其他任务
module.exports.default = gulp.series(delDist,gulp.parallel(html,css,js,images,libs,ico,server,watch))