Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
let project_folder = require("path").basename(__dirname); let source_folder = "#AmericanBatler"; let path = { build: { html: project_folder + "/", css: project_folder + "/css/", js: project_folder + "/js/", img: project_folder + "/img/", fonts: project_folder + "/fonts/", }, src: { html: [source_folder + "/*.html", "!" + source_folder + "/_*.html"], css: source_folder + "/scss/style.scss", js: source_folder + "/js/main.js", img: source_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}", fonts: source_folder + "/fonts/**/*", }, watch: { html: source_folder + "/**/*.html", css: source_folder + "/scss/**/*.scss", js: source_folder + "/js/**/*.js", img: source_folder + "/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"); group_media = 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"); // Создание локального сервера const browserSync = (params) => { browsersync.init({ server: { baseDir: "./" + project_folder + "/", }, port: 3000, // notify:false }); }; // манипуляции с HTML const html = () => { return src(path.src.html) .pipe(fileinclude()) .pipe(webphtml()) .pipe(dest(path.build.html)) .pipe(browsersync.stream()); }; // манипуляции с CSS const css = () => { return src(path.src.css) .pipe( scss({ outputStyle: "expanded", }) ) .pipe(group_media()) .pipe( autoprefixer({ cascade: true, overrideBrowserslist: ["last 5 versions"], }) ) .pipe(webpcss()) .pipe(dest(path.build.css)) .pipe(clean_css()) .pipe( rename({ extname: ".min.css", }) ) .pipe(dest(path.build.css)) .pipe(browsersync.stream()); }; // манипуляции с JS const 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()); }; // Манипуляции с IMG const images = () => { return src(path.src.img) .pipe( webp({ quality: 70, }) ) .pipe(dest(path.build.img)) .pipe(src(path.src.img)) .pipe( imagemin({ progressive: true, svgoPlugins: [{ removeViewBox: false }], interlaced: true, optimizationlevel: 3, }) ) .pipe(dest(path.build.img)) .pipe(browsersync.stream()); }; const 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); }; const fonts = () => { return src(path.src.fonts).pipe(dest(path.build.fonts)); }; // Удаление папки dist const clean = (params) => { return del(path.clean); }; // Сценарий выполнения Gulp let build = gulp.series(clean, gulp.parallel(js, css, html, images, fonts)); 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;