const gulp = require("gulp"),
    htmlmin = require("gulp-htmlmin"),
    minifyCss = require("gulp-minify-css"),
    sass = require("gulp-sass"),
    uglify = require("gulp-uglify"),
    babel = require("gulp-babel"),
    connect = require("gulp-connect"),
    del = require('del'),
    {
        createProxyMiddleware
    } = require('http-proxy-middleware');


gulp.task("html", function (cb) {
    gulp.src("src/*.html")
        .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"))
        .pipe(connect.reload());
    cb();
})
gulp.task("clean", function (cb) {
    del.sync(['dist']);
    cb();
})
gulp.task("css", function (cb) {
    gulp.src("src/css/*.scss")
        .pipe(sass())
        .pipe(minifyCss())
        .pipe(gulp.dest("dist/css"))
        .pipe(connect.reload());
    cb();
})

gulp.task("js", function (cb) {
    gulp.src("src/js/*.js")
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest("dist/js"))
        .pipe(connect.reload());
    cb();
})
gulp.task("lib", function (cb) {
    gulp.src("src/libs/*")
        .pipe(gulp.dest("dist/libs"))
        .pipe(connect.reload());
    cb();
})

gulp.task("img", function (cb) {
    gulp.src("src/img/**/*")
        .pipe(gulp.dest("dist/img"))
        .pipe(connect.reload());
    cb();
})
gulp.task('connect', function (cb) {
    connect.server({
        root: 'dist',
        port: 8080,
        livereload: true,
        middleware: function (connect, opt) {
            return [
                createProxyMiddleware('/api', {
                    target: 'http://wodeshebao.com/', //代理的目标地址 120.79.211.173
                    changeOrigin: true, //
                    pathRewrite: { //路径重写规则 
                        '^/api': ''
                    }
                })
            ]
        }
    });
    cb();
});

// 监听文件的改变，然后自动执行对应的任务
gulp.task("watch", function (cb) {
    // 监听所有html文件的改变，然后执行html任务
    gulp.watch("src/**/*.html", gulp.series('html'));
    gulp.watch("src/js/**/*.js", gulp.series('js'));
    gulp.watch("src/css/**/*.scss", gulp.series('css'));
    cb();
})

gulp.task("init", gulp.series("clean", gulp.parallel("html", "js", "css", "lib", "img")))
gulp.task("default", gulp.series("init", "connect", "watch"));