// 엄격 모드
"use strict";
  
// 모듈 호출
import {src, dest, series, parallel, watch} from 'gulp';
import sass from 'gulp-sass';
import spritesmith from 'gulp.spritesmith-multi';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
import imagemin from 'gulp-imagemin';
import buffer from 'vinyl-buffer';
import config from './config.json';
import merge from 'merge-stream';
import compressCss from 'gulp-clean-css';
import del from 'del';
  
// php 서버
import phpConnect from 'gulp-connect-php';
import browserSync from 'browser-sync';
  
// 이미지 삭제
const cleanImg = () => {
    return del(config.path.sprites.dest, { force: true })
}
  
const sprites = () => {
    const opts = {
        spritesmith: function (options, sprite, icons){
            options.imgName = `sp_${sprite}.png`;
            options.imgPath =  `../../img/order_v3/sprites/${options.imgName}`;
            options.cssName = `_sp_${sprite}.scss`;
            options.cssTemplate = './scss-minimal.handlebars';
            options.cssSpritesheetName = sprite;
            options.padding = 10;
            options.retinaSrcFilter = null;
            options.retinaImgName = null;
            options.retinaImgPath = null;
            options.cssVarMap = function(sp) {
                sp.name = `sp_${sprite}_${sp.name}`;
            };
            return options;
        }
    };
  
    const spriteData = src(config.path.sprites.src)
        .pipe(spritesmith(opts))
        .on('error', function (err) {
            console.log(err)
        })
  
    const imgStream = spriteData.img
        .pipe(buffer())
        .pipe(imagemin())
        .pipe(dest("../img/order_v3/sprites/"));
    const cssStream = spriteData.css
        .pipe(dest('../sass/order/sprites/'));
    return merge(imgStream, cssStream);
}
  
const sassBuild = () => {
    return src(config.path.sass.src, { sourcemaps: true })
        .pipe(sass({
            outputStyle: 'compact'
        })).on('error', sass.logError)
        .pipe(postcss([autoprefixer()]))
        .pipe(compressCss({ format: 'keep-breaks' }))
        .pipe(dest(config.path.sass.dest, {sourcemaps: true}))
}
  
const browserSyncReload = (done) => {
    browserSync.reload();
    done();
}
  
// php 서버
const phpServer = () => {
    phpConnect.server({
        // browsersync가 프록시를 통해 연결되는 독립형 PHP 서버
        // 웹 서버에 액세스하려는 포트입니다. 포트가 이미 사용 중이면 작업이 실패합니다.
        port: 80,
        keepalive: true,
        base: "../"
    }, function () {
        browserSync({
            // php 서버 포트번호와 동일해야됩니다.
            proxy: 'localhost:80'
        })
    })
    watch("../html/**/*.html", browserSyncReload)
    watch([
        config.path.sprites.src,
        `!${config.path.sprites.dest}`
    ], series(cleanImg, sprites, sassBuild, browserSyncReload))
    watch([
        "../sass/**/**/*",
        "!../sass/**/sprites/*"
    ], series(sassBuild, browserSyncReload))
}
  
exports.default = series(cleanImg, sprites, sassBuild, phpServer);
exports.build = series(cleanImg, sprites, sassBuild);