"use strict"
let project_folder="dist";
let source_code="src";
let path={
build:{
html: project_folder + "/",
css: project_folder + "/css/",
js: project_folder + "/js/",
img: project_folder + "/img/",
font: project_folder + "/font/",
},
src:{
html: [source_code + "/*.html", "!" + source_code + "/_*.html"],
css: source_code + "/scss/style.scss",
js: source_code + "/js/main.js",
img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
font: source_code + "/font/*.ttf",
},
watch:{
html: source_code + "/**/*.html",
css: source_code + "/scss/**/*.scss",
js: source_code + "/js/**/*.js",
img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
},
clean:"./" + project_folder + "/"
}
let {src, dest} = require('gulp'),
gulp = require ("gulp"),
browsersync = require ("browser-sync").create(),
fileinclude = require ("gulp-file-include"),
del = require ("del"),
scss = require ("gulp-sass"),
autoprefixer = require ("gulp-autoprefixer"),
media_queries = require ("gulp-group-css-media-queries"),
clean_css = require ("gulp-clean-css"),
rename = require ("gulp-rename"),
uglify = require ("gulp-uglify-es").default,
imagemin = require ("gulp-imagemin"),
webp = require ("gulp-webp"),
webphtml = require ("gulp-webp-html"),
webpcss = require ("gulp-webpcss"),
svgSprite = require ("gulp-svg-sprite"),
ttf2woff = require ("gulp-ttf2woff"),
tt2woff = require ("gulp-ttf2woff2"),
fonter = require ("gulp-fonter");
function browserSync(params){
browsersync.init({
server:{
baseDir:"./" + project_folder + "/"
},
port:3000,
notify:false
})
}
function html(){
return src(path.src.html)
.pipe(fileinclude())
.pipe(webphtml())
.pipe(dest(path.build.html))
.pipe(browsersync.stream())
}
function css(){
return src(path.src.css)
.pipe(
scss({
outputStyle:"expanded"
})
)
.pipe(
media_queries()
)
.pipe(
autoprefixer({
overrideBrowserlist: ["last 5 versions"],
cascade: true
})
)
.pipe(webpcss())
.pipe(dest(path.build.css))
.pipe(clean_css())
.pipe(
rename({
extname:".min.css"
})
)
.pipe(dest(path.build.css))
.pipe(browsersync.stream())
}
function js(){
return src(path.src.js)
.pipe(fileinclude())
.pipe(dest(path.build.js))
.pipe(
uglify()
)
.pipe(
rename({
extname:".min.js"
})
)
.pipe(dest(path.build.js))
.pipe(browsersync.stream())
}
function images(){
return src(path.src.img)
.pipe(dest(path.build.img))
.pipe(src(path.src.img))
.pipe(
webp({
quality:70
})
)
.pipe(
imagemin({
interlaced:true,
progressive:true,
optimizationLevel:3,
svgoPlugins:[{removeViewBox:true}]
})
)
.pipe(dest(path.build.img))
.pipe(browsersync.stream())
}
// function fonts(){
// src(path.src.fonts)
// .pipe(tt2woff())
// .pipe(dest(path.build.fonts));
// return(path.src.fonts)
// .pipe(ttf2woff2())
// .pipe(dest(path.build.fonts));
// };
gulp.task("svgSprite", function(){
return gulp.src([source_code + "/iconsprite/*.svg"])
.pipe(svgSprite({
mode:{
stack:{
sprite:"../icons/icons.svg",
example:true
}
},
}
))
.pipe(dest(path.build.img))
})
function watchFiles(params){
gulp.watch([path.watch.html], html);
gulp.watch([path.watch.css], css);
gulp.watch([path.watch.js], js);
gulp.watch([path.watch.img], images);
}
function clean(params){
return del(path.clean);
}
let build = gulp.series(clean, gulp.parallel(js, css, html, images));
let watch=gulp.parallel(build, watchFiles, browserSync);
// exports.fonts = fonts;
exports.images = images;
exports.js = js;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;