const {
    src,
    dest,
    series,
    parallel,
    watch
} = require("gulp");
const webserver = require("gulp-webserver");
const concat = require("gulp-concat");
const sass = require("gulp-sass");
const webpack = require("webpack-stream");
const proxy = require("http-proxy-middleware");
const del = require("del");


function compileHTML() {
    return src("src/views/**/*.html")
        .pipe(dest("dev/views/"));
}

function compileIndexCSS() {
    return src(["src/styles/index/*.scss","src/styles/reset.scss"])
        .pipe(sass().on('error', sass.logError))
        .pipe(concat("index.min.css"))
        .pipe(dest("dev/styles/"));
}

function compileDetailCSS(){
    return src(["src/styles/detail/*.scss","src/styles/reset.scss"])
        .pipe(sass().on('error', sass.logError))
        .pipe(concat("detail.min.css"))
        .pipe(dest("dev/styles/"));
}

function compileJS() {
    return webpack({
            mode: "development",
            // entry: "./src/scripts/app.js",
            entry:{
                "app":"./src/scripts/app.js",
                "detail":"./src/scripts/detail.js"
            },
            devtool: "source-map",
            output: {
                filename: "[name].min.js",
            },
            module: {
                rules: [{
                        test: /\.m?js$/,
                        exclude: /(node_modules|bower_components)/,
                        use: {
                            loader: 'babel-loader',
                            options: {
                                presets: ['@babel/preset-env'],
                                plugins: ['@babel/plugin-transform-runtime']
                            }
                        }
                    },
                    {
                        test: /\.html$/,
                        loader: "string-loader"
                    }
                ]
            }
        })
        .pipe(dest("dev/scripts/"));
}

function watchFile() {
    watch("src/views/**/*.html", compileHTML);
    watch("src/styles/index/*.scss", compileIndexCSS);
    watch("src/styles/detail/*.scss",compileDetailCSS);
    watch(["src/**/*.js","src/views/**/*.html"], compileJS);
    watch("src/static/**/*.*", copyStatic);
}

function copyStatic() {
    return src("src/static/**/*.*")
        .pipe(dest("dev/static/"));
}

function server() {
    return src("./dev/")
        .pipe(webserver({
            open:"./views/index.html",
            livereload: true,
            // middleware: [
            //     //https://m.lagou.com/listmore.json?pageNo=2&pageSize=15
            //     proxy('/api', {
            //         target: "http://localhost:8099/",
            //         changeOrigin: true
            //         // pathRewrite: {
            //         //     "/^api/": ""
            //         // }
            //     })
            // ]
        }))
}

function clean(path){
    return function(){
        return del(path)
    }
}


exports.default = series(clean("./dev"),parallel(compileHTML, compileIndexCSS,compileDetailCSS,compileJS,copyStatic), server, watchFile);