/*
    gulp.src( 路径 )    是 gulp 依赖包自带的 函数方法程序
                        作用是 指定 要打包压缩的文件程序
                        *.css   文件名任意 扩展名是css的文件 也就是 任意名称的css文件 --- 子级文件
                        *.*     文件名任意 扩展匿任意的文件 也就是 所有的文件 --- 子级文件
                        **      当前文件夹中的所有文件 --- 后代文件

    pipe( 压缩规范()/gulp程序() )      
                        gulp自带的程序,作用是专门执行gulp程序和gulp压缩规范的
                        执行对象 就是 之前程序 获取的 文件内容

    gulp.dest( 路径 )   将 指定的文件 存储在 设定的 文件夹路径中
                        文件的名称不会改变
                        如果 路径不存在 会自动创建路径存储文件

    gulp.series()       gulp依赖包自带的程序
                        按照顺序执行其中设定的函数程序
                        参数是 函数名称
                        
    gulp.parallel()     gulp依赖包自带的程序
                        同时执行其中设定的函数程序
                        参数是 函数名称

    module.exports.default = 。。。。。
                        以 gulp 命令 执行 默认程序 也就是 gulpfile.js 中
                        导出的程序内容


    gulp.watch(参数1,参数2)
                        gulp依赖包自带的程序
                        是 文件监听程序
                        参数1:  监听的文件路径 / 文件内容
                                也就是当参数1中的文件改变时 自动执行打包压缩规范程序
                        参数2:  执行的打包压缩规范的函数名称

*/



// 1, 加载相关依赖包

// gulp依赖包
const gulp = require('gulp');

// css需要的依赖包
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');

// js需要的依赖包
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// html需要的依赖包
const htmlmin = require('gulp-htmlmin');

// 服务器依赖包
const webserver = require('gulp-webserver');

// 删除程序依赖包
const del = require('del');

// 2, 设定 打包压缩规范

// css打包规范语法
const cssHandler = function(){
    return gulp.src('./src/css/*.css')      // 指定 执行打包压缩的文件路径
    .pipe( autoprefixer() )                 // 对 src获取的文件 执行 添加前缀规范
    .pipe( cssmin() )                       // 对 src获取的文件 执行 添加前缀之后 执行打包压缩
    .pipe( gulp.dest('./dist/css') );       // 将 执行了打包压缩规范之后的文件 指定 存储位置                          
}

// js打包规范
const jsHandler = function(){
    return gulp.src('./src/js/*.js')                // 指定 执行打包压缩的文件路径
    .pipe( babel( {presets:['@babel/env']} ) )      // 讲其他版本的js语法,转化为ES5语法
    .pipe( uglify() )                               // 将ES5语法的js程序 打包压缩
    .pipe( gulp.dest('./dist/js') );                // 将 执行了打包压缩规范之后的文件 指定 存储位置                          
}

// html打包规范
const htmlHandler = function(){
    return gulp.src('./src/pages/*.html')
    .pipe( htmlmin({                                // 以 对象的形式 设定 html打包压缩参数
        removeAttributeQuotes:true,                 // 删除属性中的双引号
        removeComments:true,                        // 删除注释
        // removeEmptyAttributes:true,                 // 删除空属性
        // removeEmptyElements:true,                   // 删除空标签         
        removeScriptTypeAttributes:true,            // 删除 script标签的 type属性
        removeStyleLinkTypeAttributes:true,         // 删除 link标签的的 type属性                    
        collapseBooleanAttributes:true,             // 删除布尔属性的属性值
        collapseWhitespace:true,                    // 删除标签之间的空格
        minifyJS:true,                              // 压缩内容js程序
        minifyCSS:true,                             // 压缩内部css程序
    })).pipe( gulp.dest('./dist/pages') )           // 压缩后的文件存储在指定文件夹中
}

// 不需要打包,直接读取复制存储的文件程序
// 图片,音频,视频   后端程序  已经压缩好的程序

// 图片
const imageHandler = function(){
    return gulp.src('./src/images/**').pipe( gulp.dest('./dist/images') );
}

// 后端程序
const phpHandler = function(){
    return gulp.src('./src/server/**').pipe( gulp.dest('./dist/server') );
}

// 工具程序
const toolsHandler = function(){
    return gulp.src('./src/tools/**').pipe( gulp.dest('./dist/tools') );
}

// 字体
const fontHandler = function(){
    return gulp.src('./src/font/**').pipe( gulp.dest('./dist/font') );
}



// 3, 设定删除程序
const delHandler = function(){
    return del(['./dist']);
}


// 4, 设定监听程序
const watchHandler = function(){
    gulp.watch( './src/css/*.css' ,  cssHandler );
    gulp.watch( './src/js/*.js' ,  jsHandler );
    gulp.watch( './src/pages/*.html' ,  htmlHandler );
    gulp.watch( './src/images/**' ,  imageHandler );
    gulp.watch( './src/server/**' ,  phpHandler );
    gulp.watch( './src/tools/**' ,  toolsHandler );
    gulp.watch( './src/font/**' ,  fontHandler );
}

// 5, 配置 gulp的 服务器
const webserverHandler = function(){
    return gulp.src('./dist')           // 运行的是 打包压缩的文件 路径是 dist文件夹 
    .pipe(webserver({
        host:'127.0.0.1',               // 服务器IP地址
        port:'8080',                    // 服务器端口
        open:'./pages/index.html',      // 默认的首页面 相对路径是从 dist 文件夹开始的
        livereload:true,                // 开启热启动 只要服务器中文件内容改变 自动刷新
    }))
}


// 设定 导出 默认执行程序 
// 之前运行文件的命令是 node gulpfile.js 
// 设定导出默认程序之后 命令是 gulp 会自动执行 gulpfile.js 文件程序
module.exports.default = gulp.series(
    delHandler,                         // 先执行删除原始压缩文件操作

    gulp.parallel( cssHandler , jsHandler , htmlHandler , imageHandler , phpHandler , toolsHandler ,fontHandler),        
                                        // 先执行一次打包压缩规范

    webserverHandler,                   // 开启服务器

    watchHandler,                       // 执行监听 如果 文件内容有改变 自动再次执行 打包压缩规范

)