var gulp = require("gulp");
var connect = require("gulp-connect");
var babel = require("gulp-babel");
var sass = require('gulp-sass');
// 在官方文档之中此处使用的 node-sass 但是我们吧node-sass替换成了 sass ; 
sass.compiler = require('sass');

var uglify = require("gulp-uglify");
var cssmin = require("gulp-cssmin");
var htmlmin = require("gulp-htmlmin");

// 处理 html的指令 => html
// - 找到src目录下的所有html文件，然后把这些文件全部转存到dist文件夹下; 

gulp.task("html", async function () {
      gulp.src(["./src/*.html"])
            .pipe(gulp.dest("./dist"))
            .pipe(connect.reload());
});


gulp.task("html-min", async function () {
      gulp.src(["./src/*.html"])
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest("./dist"))
            .pipe(connect.reload());
});
// 处理javascript
// - 找到src目录下javascripts文件夹下的所有的.js后缀的文件; 
gulp.task("javascript", async function () {
      gulp.src(["./src/javascripts/*.js"])
            .pipe(babel({
                  presets: ['@babel/env']
            }))
            .pipe(gulp.dest("./dist/javascripts"))
            .pipe(connect.reload());
});
// 但凡是带有压缩功能的指令都要独立出来; 
gulp.task("javascript-min", async function () {
      gulp.src(["./src/javascripts/*.js"])
            .pipe(babel({
                  presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(gulp.dest("./dist/javascripts"))
});


// 处理scss
// - 找到src目录下scss文件夹下的所有的.scss后缀的文件; 
gulp.task("scss", async function () {
      gulp.src(["./src/scss/*.scss"])
            // 我们转存的时候应该在dist里面转存到css文件夹里; 
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest("./dist/css"))
            .pipe(connect.reload());
});

gulp.task("scss-min", async function () {
      gulp.src(["./src/scss/*.scss"])
            // 我们转存的时候应该在dist里面转存到css文件夹里; 
            .pipe(sass().on('error', sass.logError))
            .pipe(cssmin())
            .pipe(gulp.dest("./dist/css"))
            .pipe(connect.reload());
});

// 静态文件转存

gulp.task("static", async function () {
      gulp.src(["./src/static/**/*"])
            .pipe(gulp.dest("./dist/static"))
})
// 监听 : 
// - 监听行为其实就是关注我们所有开发之中的代码是否发生了改变，如果代码发生了改变那么我们就自动去执行某些指令; 
gulp.task("watch", async function () {
      // - 找到路径为 ./src/*.html 的文件进行监听，如果这些文件发生了改变，那么就执行html指令; 
      await gulp.watch(["./src/*.html"], gulp.series("html"));
      // 赋值粘贴改路径; 
      await gulp.watch(["./src/javascripts/*.js"], gulp.series("javascript"));
      await gulp.watch(["./src/scss/*.scss"], gulp.series("scss"));
      await gulp.watch(["./src/static/**/*"], gulp.series("static"));
});

// 服务器启动指令 : 

gulp.task("connect", async function () {

      connect.server({
            // 配置测试服务器的根目录 ; 
            root: "./dist",
            // 开启主动刷新功能 : 
            // - connect指令和watch执行必须同时执行; 
            // - 所有的需要主动刷新的指令头面都要加上 connect.reload();
            livereload: true
      });
});


// 组合指令 : 
// - 先执行 html , scss , javascript 指令然后再去执行代码监听; 

// - 特殊指令名 : default , 队列 ; 
gulp.task("default", gulp.series("html", "scss", "javascript", "static", "watch", "connect"));

gulp.task("build", gulp.series("html-min", "scss-min", "javascript-min"));