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( ["./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", "watch" , "connect","static"));

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