// 这里是书写文件的打包规则的地方
// 引入我们的gulp第三方
const gulp = require('gulp')

// 导入压缩css文件的第三方
const cssmin = require('gulp-cssmin')
// 导入自动添加前缀文件的第三方
const autoprefixer = require('gulp-autoprefixer')

// 导入我们的gulp-sass第三方
const sass = require('gulp-sass')(require('sass'))

// 导入我们的gulp-uglify第三方
const uglify = require('gulp-uglify')

// 导入我们的gulp-babel第三方
const babel = require('gulp-babel')

// 导入我们的gulp-htmlmin第三方
const htmlmin = require('gulp-htmlmin')
// 导入我们的gulp-file-include第三方
const fileInclude = require('gulp-file-include')

// 导入我们的gulp-imagemin第三方
// const imagemin = require('gulp-imagemin')

// 导入del第三方
const del = require('del')

// 导入我们的第三方 gulp-webserver
const webserver = require('gulp-webserver')



/* 
    打包css
        => 首先要创建一个打包任务
        => 要找到你要打包的文件
        => 要书写我们打包规则
        => 打开命令行工具 切换目录到项目的根目录
        => 也就是和gulpfile.js一个层级
        => 执行指令: $ gulp 你要打任务的任务名称

        => 开始压缩 这里需要一个第三方  (自己写的在cmd里面书写:npm i -D gulp-cssmin)
        => 这个第三方叫做 gulp-cssmin
        => 我们需要下载并导入 导入进来就是一个函数调用即可
    
        => 自动添加前缀    (自己写的在cmd里面书写:npm i -D gulp-autoprefixer)
        => 也需要一个第三方 叫做: gulp-autoprefixer
        => 下载导入使用
        => 就是一个函数
        => 这个使用的时候需要传递一个参数 autoprefixer({ browsers: ["last 2 versions"] })
        Replace Autoprefixer browsers option to Browserslist config.
        Use browserslist key in package.json or .browserslistrc file.
*/

/* 
    scss打包    (自己写的在cmd里面书写:npm i -D gulp-sass)
        => 就是把scss转换成css
        => 也需要一个第三方
        => 叫做: gulp-sass
        => 这个转码需要两个第三方 
            -> 一个是gulp-sass
            -> 还有一个叫做 sass
        => 同时导入方式也不太一样
            -> 需要const sass = require('gulp-sass')(require('sass'))
*/

/* 
    js打包
        =>  js 打包也需要用到一个第三方    (自己写的在cmd里面书写:npm i -D gulp-uglify)
        => 这个第三方叫做: gulp-uglify  (自己写的:是丑化的意思;)
        => 我们需要下载导入
        => 导入进来就是一个函数 直接调用即可

        => 在之前uglify是不认识ES6的语法的
        => 需要我们把ES6转换成ES5的语法
        => 需要用到三个第三方
        => 我们引入的时候只需要引入一个就可以
        => 但是我们下载的时候三个都需要下载  (自己写的:这个三个包只需要引入一个就可以了)
            -> gulp-babel         (自己写的在cmd里面书写:npm i -D gulp-babel)
            -> @babel/core        (自己写的在cmd里面书写:npm i -D @babel/core)
            -> @babel/preset-env  (自己写的在cmd里面书写:npm i -D @babel/preset-env)
        => 导入进来就是一个函数 我们直接调用
        => 但是需要传递参数
            -> babel({presets:['@babel/preset-env']})
*/

/* 
    html打包
        => 打包我们的html 也需要使用一个第三方
        => 这个第三方叫做: gulp-htmlmin   (自己写的在cmd里面书写:npm i -D gulp-htmlmin)
        => 导入进来就是一个函数
        => 直接调用就可以 但是需要传递不同的参数

        => 有一个问题
            -> 组件的问题
            -> 也需要使用一个第三方
            -> 这个第三方叫做: gulp-file-include
            -> 我们需要下载导入
            -> 导入进来就是一个函数 
            -> 我们需要调用使用
                -> 需要传递参数
                -> 

*/

/* 
    图片打包
        => 也需要用到一个第三方  (自己写的:cmd输入npm i -D gulp-imagemin)
        => 这个第三方叫做: gulp-imagemin
        => 下载并导入
        => 导入进来就是一个函数 直接调动即可  不需要传递参数
*/

// 打包css
// 创建打包任务
// 这个是新的打包方式
// 但是这样的打包不能执行
// 需要把这个任务名称导出去
function cssHandler() {
    return gulp
        .src('../src/css/*.css')
        .pipe(autoprefixer())
        // 打包规则
        .pipe(cssmin())
        .pipe(gulp.dest('../dist/css/'))
}

// sass的打包
// function sassHandler() {
//     return gulp
//         .src('./src/scss/*.scss')
//         // 这里是转化的过程
//         .pipe(sass())
//         .pipe(autoprefixer())
//         // 打包规则
//         .pipe(cssmin())
//         .pipe(gulp.dest('./dist/scss/'))
// }

// js的打包
function jsHandler() {
    return gulp
        .src('../src/js/*.js')
        // ES6转ES5是在压缩之前进行
        .pipe(babel({ presets: ['@babel/preset-env'] }))
        .pipe(uglify())
        .pipe(gulp.dest('../dist/js/'))
}

// html的打包
function htmlHandler() {
    return gulp
        .src('./src/views/*.html')
        // 这里是我们的组件的使用
        .pipe(fileInclude({
            // 这个路径就是你存放组件的地方
            basepath: './src/components/',
            // 这里是自己定义的一个标识符
            prefix: '@_@'
        }))

        // 这里是我们的压缩规则
        .pipe(htmlmin({
            removeComments: true, // 是否移除注释
            removeEmptyAttributes: true, //是否移除空属性
            removeAttributeQuotes: true,  //是否移除属性值的双引号
            // collapseWhitespace: true, //是否移除空格和换行
            collapseBooleanAttributes: true, //是否简化属性值为布尔的属性
            removeScriptTypeAttributes: true, // 是否移除 script 标签的默认 type 属性
            removeStyleLinkTypeAttributes: true, // 是否移除 link 和 style 标签的默认 type 属性
            minifyCSS: true, //是否压缩页面中给的 style 标签（内嵌式 `css` 代码）
            minifyJS: true, // 是否压缩页面的的 `script` 标签（内嵌式 `js` 代码）
        }))
        .pipe(gulp.dest('./dist/views/'))
}

// 打包图片
function imageHandler() {
    return gulp
        .src('./src/image/**.*')  //自己写的:当前文件夹下的images下的所有的图片;
        // 这里是压缩的过程
        // .pipe(imagemin())
        //这里是压缩的过程
        .pipe(gulp.dest('./dist/image/'))
}

// 下面的就是我们保证里面的结构完整就可以
// 直接导过去就可以了
// audio打包
function audioHandler() {
    return gulp
        .src('./src/audios/**.*')
        .pipe(gulp.dest('./dist/audios'))
}
// 打包data
function dataHandler() {
    return gulp
        .src('./src/data/**.*')
        .pipe(gulp.dest('./dist/data'))
}
// 打包fonts
function fontsHandler() {
    return gulp
        .src('./src/fonts/**.*')
        .pipe(gulp.dest('./dist/fonts'))
}
// 打包libs
function libsHandler() {
    return gulp
        .src('./src/libs/**.*')
        .pipe(gulp.dest('./dist/libs'))
}
// 打包videos
function videosHandler() {
    return gulp
        .src('./src/videos/**.*')
        .pipe(gulp.dest('./dist/videos'))
}

// 我们可以配置一个删除文件
// 也需要一个第三方 叫做: del
// 不需要借助gulp
function delHandler() {
    return del(['./dist/'])
}

// 在开发过程中的一边开发一边打包
// 需要个热更新
// 需要一个第三方 这个第三方叫做 : gulp-webserver
// 需要下载导入使用  (自己写的:先输入cmd里面, npm i -D gulp-webserver)
// 导入进来就是一个函数 但是需要传递参数

function webserverHandler() {
    return gulp
        .src('./dist')
        .pipe(webserver({
            host: 'localhost',
            port: 8080,
            open: './views/home.html',
            livereload: true  //自己写的:是否自动更新;
        }))
}

// 需要使用一个监听
function watchHandler() {
    // 这里不需要返回出去
    gulp.watch('./src/views/*.html', htmlHandler)
    gulp.watch('./src/js/*.js', jsHandler)
    gulp.watch('./src/css/*.css', cssHandler)
}

/* 
    到这里我们发现 我们现在每打包一个都需要
    单独的去执行每一个文件
    所以我需要打包一个综合任务 一次行能执行完所有的打包
    通过我们的分析 到现在为止 我们的打包没有先后顺序
    只要能打包完毕就可以 我们要用到的一个方法是 parallel()
    我们导出的时候最好是导出default 因为我们在执行的时候只需要写 gulp就可以了
*/
//开启一个综合任务
// let _default = gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, audioHandler, dataHandler, fontsHandler, libsHandler, videosHandler)

// 添加了删除功能以后的综合任务
let _default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, audioHandler, dataHandler, fontsHandler, libsHandler, videosHandler),
    webserverHandler,
    watchHandler
)
// 导出我们的任务名称
module.exports = {
    // cssHandler: cssHandler
    cssHandler,
    sassHandler,
    jsHandler,
    htmlHandler,
    imageHandler,
    audioHandler,
    dataHandler,
    fontsHandler,
    libsHandler,
    videosHandler,
    delHandler,
    webserverHandler,
    default: _default
}