// sass
import gulp from 'gulp';
import gulpif from 'gulp-if';
import sass  from 'gulp-sass';
// import sass  from 'gulp-ruby-sass';
import cleanCSS from 'gulp-clean-css';
import newer from 'gulp-newer';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';
import browser from 'browser-sync';
import pathConfig from '../paths.js'
import gcmq from 'gulp-group-css-media-queries';
import concat from 'gulp-concat';
import minifyCss from 'gulp-minify-css';

// export const stylesBuild = () => {
//   return gulp.src(`${pathConfig.src.sass}/**/*.scss`, {
//     ignore: pathConfig.isProd && [`${pathConfig.src.sass}/parts/*.scss`]
//   })

//     .pipe(newer('*'))
//     .pipe(gulpif(pathConfig.isDevelop, sourcemaps.init()))
//     .pipe(sass.sync().on('error', sass.logError))
//     .pipe(gulpif(pathConfig.isProd, gcmq()))
//     .pipe(gulpif(pathConfig.isProd, autoprefixer()))
//     .pipe(gulpif(pathConfig.isProd, cleanCSS({ level: 2 })))
//     .pipe(gulpif(pathConfig.isDevelop, sourcemaps.write('./')))
//     .pipe(gulp.dest(pathConfig.assets.css))

//     .pipe(browser.reload({stream: true}));
// }

export const stylesBuild = () => {
  return gulp.src(`${pathConfig.src.sass}/**/*.scss`)
    .pipe(gulpif(pathConfig.isDevelop, sourcemaps.init()))
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(concat("bundle.css"))
    .pipe(gulpif(pathConfig.isDevelop, sourcemaps.write('./')))
    .pipe(gulp.dest(pathConfig.assets.css))

  // return sass(`${pathConfig.src.sass}/**/*.scss`)
  // .pipe(sourcemaps.write())
  // .pipe(sourcemaps.init({loadMaps: true}))
  // .pipe(minifyCss({}))
  // .pipe(sourcemaps.init({loadMaps: true}))
  // .pipe(concat("app.min.css"))
  // .pipe(sourcemaps.write())
  // .pipe(gulp.dest( './build' ));
}


export const stylesDevelop = () => gulp.watch(`${pathConfig.src.sass}/**/*.scss`, stylesBuild).on('change', browser.reload.bind(null, {stream: true}));