// gulp使用準備：
// 1.使用npm i gulp 下載gulp庫檔案
// 2.在專案根目錄下建立gulpfile.js檔案
// 3.重構專案的資料夾結構src目錄放置原始碼檔案，dist目錄存放構建後的檔案
// 4.在gulpfile.js檔案中編寫任務
// 5.在命令列工具中執行gulp任務（需要先安裝gulp命令列工具：npm i gulp-cli -g）

// gulp中提供的方法
// gulp.src()      獲取任務要處理的檔案
// gulp.dest()     輸出檔案
// gulp.task()     建立gulp任務
// gulp.watch()    監控檔案的變化
// gulp.run()      執行指定的任務

// gulp常用外掛(去npm看文件)
// gulp-htmlmin:       html壓縮
// gulp-csso:          css壓縮
// gulp-babel:         es6轉es5
// gulp-less:          翻譯less
// gulp-sass:          翻譯sass
// gulp-uglify:        壓縮混淆js
// gulp-file-include:  公共檔案包含
// browsersync:        瀏覽器實時同步
// gulp-watch:         監控檔案變化（自帶的gulp.watch()無法監聽到新增加的檔案，這個模組可以）

const gulp = require('gulp');
const sass = require('gulp-sass');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const browsersync = require('browser-sync');
const watch = require('gulp-watch');

const path = {
    sass: 'src/css/*.scss',
    js: 'src/js/*.js',
    html: 'src/*.html'
};
// 使用gulp.task建立任務
gulp.task('sass', () => { // gulp-cli安裝後命令行使用gulp sass即可執行該任務
    gulp.src(path.sass)
        .pipe(sass().on('error', sass.logError)) // 編譯sass
        .pipe(csso()) // css程式碼壓縮
        .pipe(gulp.dest('dist/css')) // 輸出
        .pipe(browsersync.stream());// 重新整理瀏覽器
});
gulp.task('jsmin', () => {
    gulp.src(path.js)
        .pipe(babel({
            presets: ['@babel/env']
         })) // es6轉es5
        .pipe(uglify())// js程式碼壓縮
        .pipe(gulp.dest('dist/js'))
        .pipe(browsersync.stream());
});
gulp.task('htmlmin', () => {
    gulp.src(path.html)
        .pipe(htmlmin({ collapseWhitespace: true })) //html程式碼壓縮
        .pipe(gulp.dest('dist'))
        .pipe(browsersync.stream());
});
gulp.task('othermove', () => {  // 該任務是將專案中其他依賴資料夾及檔案拷貝到dist下
    gulp.src('src/audio/**/*')
        .pipe(gulp.dest('dist/audio'));
    gulp.src('src/img/**/*')
        .pipe(gulp.dest('dist/img'));
});
//定義監聽檔案修改的任務
gulp.task('watch', function () {
    watch(path.html, gulp.series('htmlmin'));
    watch(path.sass, gulp.series('sass'));
    watch(path.js, gulp.series('jsmin'));
});

// 建立服務
gulp.task('browsersync', () => {
    browsersync.init({
        server: {
            baseDir: 'dist/'
        }
    });
});
// -------------------gulp3.9寫法--------------------
// gulp.task('default', ['sass', 'jsmin', 'htmlmin', 'othermove', 'browsersync', 'watch']);
// -------------------gulp4.0以後寫法--------------------
// 此時命令列執行gulp命令即可執行gulp.parallel中的所有任務將src中的原始碼處理後輸出到dist目錄下並將輸出後的專案使用browsersync開啟，在修改src下的scss、js、html儲存時會自動執行對應任務輸出並重新整理瀏覽器
gulp.task('default', gulp.parallel('sass', 'jsmin', 'htmlmin', 'othermove', 'browsersync', 'watch'));