const imagemin = require('gulp-imagemin')
const terser = require('gulp-terser');
const concat = require('gulp-concat')
const sourcemap = require('gulp-sourcemaps')
const cssnano = require('cssnano')
const autoprefixer = require('autoprefixer')
const cssmedia = require('group-css-media-queries')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const {src, series, parallel, dest, watch} = require('gulp');
const path = {
source: {
html: 'src/*.html',
img: 'src/img/*',
js: 'src/js/**/*.js',
scss: 'src/scss/**/*.scss'
},
build: {
css: 'dist/css',
img: 'dist/img',
js: 'dist/js',
}
}
function html(){
return src(path.source.html).pipe(dest('dist'))
}
function img(){
return src(path.source.img)
.pipe(imagemin({
interlaced: true,
progressive: true,
optimizationLevel: 3,
svgoPlugins: [
{
removeViewBox: true
}
]
}))
.pipe(dest(path.build.img))
}
function css(){
return src(path.source.scss)
.pipe( concat('style.css') )
.pipe(
sass({
outputStyle: 'expanded'
})
)
.pipe(
postcss([
autoprefixer({
overrideBrowserslist: ['last 5 versions'],
cascade: true
}),
cssnano()
]
) )
.pipe(dest(path.build.css))
}
function js() {
return src(path.source.js)
.pipe(sourcemap.init())
.pipe(concat('script.js'))
.pipe(terser())
.pipe(sourcemap.write('.'))
.pipe(dest(path.build.js))
}
function watchTask(){
return watch([path.source.html,path.source.scss, path.source.js, path.source.img], {interval: 1000}, parallel(html,css, js, img))
}
exports.html = html;
exports.img = img;
exports.js = js;
exports.css = css;
exports.default = series(parallel(html, img, js, css), watchTask);
