// 載入 package
var gulp = require('gulp-help')(require('gulp'));   // 附加上 gulp-help，可以知道有哪些任務指令已存在
var browserSync = require('browser-sync').create(); // 瀏覽器同步檢視
var uglify = require('gulp-uglify');                // 壓縮 js
var cleanCSS = require('gulp-clean-css');           // 壓縮 css
var imageMin = require('gulp-imagemin');            // 壓縮 image
var concat = require('gulp-concat');                // 合併檔案
var useref = require('gulp-useref');                // 用來解析 html 註解標籤，用於合併檔案與 html 中所引入的檔案修改
var del = require('del');                           // 完整刪除資料夾與檔案

gulp.task('server', function () {
    // 瀏覽器檢視同步的資料夾
    browserSync.init({
        server: 'dist'
    });
});

// 完整刪除 dist 資料夾
gulp.task('clean', function () {
    return del('dist');
});

gulp.task('script', function () {
    return gulp.src('src/js/*.js')                  // 所有要壓縮的 .js 檔案
            .pipe(uglify())                         // 將 JavaScript 最小化
            .pipe(concat('main.min.js'))            // 將所有 js 合併成 main.min.js
            .pipe(gulp.dest('dist/js'))             // 壓縮後檔案輸出位置
            .pipe(browserSync.stream());            // 瀏覽器檢視同步更新
});

gulp.task('style', function() {
    return gulp.src('src/css/*.css')                // 所有要壓縮的 .css 檔案
            .pipe(cleanCSS({compatibility:'ie8'}))  // 將 css 最小化
            .pipe(concat('main.min.css'))           // 將所有 css 合併成 main.min.css
            .pipe(gulp.dest('dist/css'))            // 壓縮後檔案輸出位置
            .pipe(browserSync.stream());            // 瀏覽器檢視同步更新
});

gulp.task('html', function () {
    return gulp.src('src/*.html')
            .pipe(useref({                          // 只有對 html 做操作而已，合併並修改 html 上有標記的地方
                noAssets: true
            }))
            .pipe(gulp.dest('dist'))
            .pipe(browserSync.stream());
});

gulp.task('image', function () {
    return gulp.src('src/images/**')
            .pipe(imageMin())                       // 將 image 最小化
            .pipe(gulp.dest('dist/images'))
            .pipe(browserSync.stream());
});

gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['script']);          //監看所有 js 檔案，檔案有更動時就執行 task script
    gulp.watch('src/css/*.css', ['style']);         //監看所有 css 檔案，檔案有更動時就執行 task style
    gulp.watch('src/*.html', ['html']);             //監看所有 html 檔案，檔案有更動時就執行 task html
    gulp.watch('src/images/**/*', ['image']);       //監看所有 image 檔案，檔案有更動時就執行 task image
});

/**
 * 主要使用的任務類型 :
 * gulp
 * gulp build
 */
gulp.task('default', ['script', 'style', 'html', 'image', 'server', 'watch']);
gulp.task('build', ['html', 'style', 'script', 'image']);