161 lines
4.2 KiB
JavaScript
161 lines
4.2 KiB
JavaScript
const {src, dest, parallel, watch} = require('gulp');
|
||
const sass = require('gulp-sass');
|
||
const autoprefixer = require('gulp-autoprefixer');
|
||
const browser = require('browser-sync');
|
||
const cleanCSS = require('gulp-clean-css');
|
||
const newer = require('gulp-newer');
|
||
const imagemin = require('gulp-imagemin');
|
||
const imageminPngquant = require('imagemin-pngquant');
|
||
const imageminZopfli = require('imagemin-zopfli');
|
||
const imageminMozjpeg = require('imagemin-mozjpeg');
|
||
const imageminGiflossy = require('imagemin-giflossy');
|
||
const sourcemaps = require('gulp-sourcemaps');
|
||
const uglify = require('gulp-uglify-es').default;
|
||
const del = require('del');
|
||
const header = require('gulp-header');
|
||
const argv = require('yargs').argv;
|
||
const gulpif = require('gulp-if');
|
||
|
||
const isDevelop = !!argv.develop
|
||
const isProd = !!argv.production;
|
||
|
||
const pathConfig = {
|
||
src: {
|
||
sass: 'src/sass',
|
||
js: 'src/js',
|
||
img: 'src/img',
|
||
fonts: 'src/fonts',
|
||
libs: 'src/libs',
|
||
},
|
||
assets: {
|
||
css: 'assets/css',
|
||
js: 'assets/js',
|
||
img: 'assets/img',
|
||
fonts: 'assets/fonts',
|
||
libs: 'assets/libs',
|
||
},
|
||
}
|
||
|
||
const getCss = async () => {
|
||
return src(`${pathConfig.src.sass}/**/*.sass`)
|
||
|
||
.pipe(newer('*'))
|
||
.pipe(gulpif(isDevelop, sourcemaps.init()))
|
||
.pipe(sass.sync().on('error', sass.logError))
|
||
.pipe(gulpif(isProd, cleanCSS({compatibility: 'ie8'})))
|
||
.pipe(gulpif(isProd, autoprefixer()))
|
||
.pipe(gulpif(isDevelop, sourcemaps.write('../sourcemaps/css')))
|
||
.pipe(dest(pathConfig.assets.css))
|
||
|
||
.pipe(browser.reload({stream: true}));
|
||
}
|
||
|
||
function getJs() {
|
||
return src(`${pathConfig.src.js}/**/*.js`)
|
||
|
||
.pipe(gulpif(isDevelop, sourcemaps.init()))
|
||
.pipe(gulpif(isProd, uglify()))
|
||
.pipe(gulpif(isDevelop, sourcemaps.write('../sourcemaps/js')))
|
||
|
||
.pipe(dest(pathConfig.assets.js))
|
||
}
|
||
|
||
function getFonts() {
|
||
return src(`${pathConfig.src.fonts}/**/*.{ttf,woff,woff2,svg,eot}`)
|
||
|
||
.pipe(dest(pathConfig.assets.fonts))
|
||
}
|
||
|
||
function check() {
|
||
watch(`${pathConfig.src.sass}/**/*.sass`, getCss).on('change', browser.reload.bind(null, {stream: true}));
|
||
watch(`${pathConfig.src.js}/**/*.js`, getJs).on('change', browser.reload);
|
||
watch(`${pathConfig.src.img}/*`, compressImages).on('change', browser.reload);
|
||
watch(`${pathConfig.src.fonts}/**/*.{ttf,woff,woff2,svg,eot}`, getFonts).on('change', browser.reload);
|
||
|
||
watch('**/*.php').on('change', browser.reload);
|
||
watch('templates/*.php').on('add', checkNewTemplates);
|
||
}
|
||
|
||
const build = async () => {
|
||
console.log('\x1b[32m*** START BUILD ***');
|
||
|
||
clean(pathConfig.assets.css);
|
||
await getCss('build')
|
||
|
||
console.log('\x1b[33m*** END BUILD ***\x1b[37m');
|
||
}
|
||
|
||
function clean(path) {
|
||
return del.sync(path);
|
||
}
|
||
|
||
function startServer(){
|
||
browser.init({
|
||
// server: './',
|
||
proxy: "armanty-quest",
|
||
open: false
|
||
})
|
||
}
|
||
|
||
function compressImages(){
|
||
return src(`${pathConfig.src.img}/*/**`)
|
||
|
||
// .pipe(newer('assets/img'))
|
||
.pipe(imagemin([
|
||
imageminGiflossy({
|
||
optimizationLevel: 3,
|
||
optimize: 3,
|
||
lossy: 2
|
||
}),
|
||
imageminPngquant({
|
||
speed: 5,
|
||
quality: [0.6, 0.8]
|
||
}),
|
||
imageminZopfli({
|
||
more: true
|
||
}),
|
||
imageminMozjpeg({
|
||
progressive: true,
|
||
quality: 90
|
||
}),
|
||
imagemin.svgo({
|
||
plugins: [
|
||
{ removeViewBox: false },
|
||
{ removeUnusedNS: false },
|
||
{ removeUselessStrokeAndFill: false },
|
||
{ cleanupIDs: false },
|
||
{ removeComments: true },
|
||
{ removeEmptyAttrs: true },
|
||
{ removeEmptyText: true },
|
||
{ collapseGroups: true }
|
||
]
|
||
})
|
||
]))
|
||
|
||
.pipe(dest(pathConfig.assets.img))
|
||
}
|
||
|
||
function checkNewTemplates(event) {
|
||
const fileName = event.slice(10, -4)
|
||
const templateName = fileName[0].toUpperCase() + fileName.slice(1)
|
||
const templateString = `<?php
|
||
/**
|
||
* Template Name: ${templateName}
|
||
*/
|
||
?>`
|
||
src(event)
|
||
.pipe(header(templateString))
|
||
.pipe(dest('./'))
|
||
|
||
|
||
//TODO создавать файл .sass фаайл в src/pages с именем созданного файла в templates
|
||
|
||
}
|
||
|
||
exports.minImg = compressImages;
|
||
exports.getcss = getCss;
|
||
exports.getjs = getJs;
|
||
exports.check = check;
|
||
exports.build = build;
|
||
exports.develop = parallel(check, startServer);
|