change gulp system

.gitignore

@@ -5,3 +5,4 @@
 /politics.docx
 /src/fonts/
 /src/libs/
+package-lock.json

gulp/paths.js

@@ -0,0 +1,23 @@
+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',
+  },
+
+  setEnv() {
+    this.isProd = process.argv.includes('--prod');
+    this.isDevelop = !this.isProd;
+  },
+}
+
+export default pathConfig;

gulp/tasks/assets.js

@@ -0,0 +1,21 @@
+// fonts, libs
+import gulp from 'gulp';
+import pathConfig from '../paths.js';
+
+const fontsBuild = () => {
+  return gulp.src(`${pathConfig.src.fonts}/**/*.{ttf, woff, woff2, svg, eot}`)
+    .pipe(gulp.dest(pathConfig.assets.fonts))
+}
+
+const libsBuild = () => {
+  return gulp.src(`${pathConfig.src.libs}/**/*`)
+    .pipe(gulp.dest(pathConfig.assets.libs))
+}
+
+export const assetsBuild = gulp.parallel(fontsBuild, libsBuild);
+ 
+
+export const assetsDevelop = () => {
+  gulp.watch(`${pathConfig.src.fonts}/**/*`, fontsBuild);
+  gulp.watch(`${pathConfig.src.libs}/**/*`, libsBuild);
+}

gulp/tasks/clean.js

@@ -0,0 +1,6 @@
+// clean function
+import del from 'del';
+
+export const clean = async (path) => {
+  del.sync(path);
+}

gulp/tasks/images.js

@@ -0,0 +1,37 @@
+// images
+import gulp from 'gulp';
+import imagemin from 'gulp-imagemin';
+import imageminPngquant from 'imagemin-pngquant';
+import imageminWebp from 'imagemin-webp';
+import changed from 'gulp-changed';
+import gulpif from 'gulp-if';
+import rename from 'gulp-rename';
+
+import pathConfig from '../paths.js'
+
+const copyImages = () => (
+  gulp.src(`${pathConfig.src.img}/**/*`)
+    .pipe(changed(pathConfig.assets.img))
+    .pipe(gulpif(pathConfig.isProd, imagemin([
+      imagemin.mozjpeg({ quality: 80 }),
+      imageminPngquant({ quality: [0.8, 0.9] }),
+      imagemin.svgo(),
+    ])))
+    .pipe(gulp.dest(pathConfig.assets.img))
+);
+
+const convertImagesToWebp = () => (
+  gulp.src(`${pathConfig.src.img}/**/*.{jpg,png}`)
+    .pipe(changed(pathConfig.assets.img, { extension: '.webp' }))
+    .pipe(imagemin([
+      imageminWebp({ quality: 80 }),
+    ]))
+    .pipe(rename({
+      extname: '.webp',
+    }))
+    .pipe(gulp.dest(pathConfig.assets.img))
+);
+
+export const imagesBuild = gulp.parallel(copyImages, convertImagesToWebp);
+
+export const imagesDevelop = () => gulp.watch(`${pathConfig.src.img}/*`, imagesBuild)

gulp/tasks/php.js

@@ -0,0 +1,22 @@
+// php create templates
+import gulp from 'gulp';
+import header from 'gulp-header';
+
+const checkNewTemplates = (event) => {
+  const fileName = event.slice(10, -4)
+  const templateName = fileName[0].toUpperCase() + fileName.slice(1)
+  const templateString = `<?php 
+/**
+ * Template Name: ${templateName}
+ */
+?>`
+  gulp.src(event)
+  .pipe(header(templateString))
+  .pipe(gulp.dest('./'))
+
+
+  //TODO создавать файл .sass фаайл в src/pages с именем созданного файла в templates
+
+}
+
+export const phpDevelop = () => gulp.watch('templates/*.php').on('add', checkNewTemplates)

gulp/tasks/scripts.js

@@ -0,0 +1,19 @@
+// js
+import gulp from 'gulp';
+import gulpif from 'gulp-if'; 
+import sourcemaps from 'gulp-sourcemaps';
+import uglify from 'gulp-uglify';
+
+import pathConfig from '../paths.js'
+
+export const scriptsBuild = () => {
+  return gulp.src(`${pathConfig.src.js}/**/*.js`)
+
+  .pipe(gulpif(pathConfig.isDevelop, sourcemaps.init()))
+  .pipe(gulpif(pathConfig.isProd, uglify()))
+  .pipe(gulpif(pathConfig.isDevelop, sourcemaps.write('./')))
+
+  .pipe(gulp.dest(pathConfig.assets.js))
+}
+
+export const scriptsDevelop = () => gulp.watch(`${pathConfig.src.js}/**/*.js`, scriptsBuild);

gulp/tasks/server.js

@@ -0,0 +1,24 @@
+// browser sync
+import browser from 'browser-sync';
+import pathConfig from '../paths.js'
+
+export const startServer = (callback) => {
+  browser.init({
+    // server: './',
+    proxy: "armanty-quest",
+    open: false,
+    files: [
+      `../../**/*.php`,
+      `${pathConfig.assets.css}/*.css`,
+      `${pathConfig.assets.js}/*.js`,
+      {
+        match: `${pathConfig.assets.img}/**/*`,
+        fn() {
+          this.reload();
+        },
+      },
+    ],
+  })
+
+  callback()
+}

gulp/tasks/styles.js

@@ -0,0 +1,29 @@
+// sass
+import gulp from 'gulp';
+import gulpif from 'gulp-if';
+import sass  from 'gulp-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'
+
+export const stylesBuild = () => {
+  return gulp.src(`${pathConfig.src.sass}/**/*.sass`, {
+    ignore: pathConfig.isProd && [`${pathConfig.src.sass}/parts/*.sass`]
+  })
+
+    .pipe(newer('*'))
+    .pipe(gulpif(pathConfig.isDevelop, sourcemaps.init()))
+    .pipe(sass.sync().on('error', sass.logError))
+    .pipe(gulpif(pathConfig.isProd, cleanCSS({compatibility: 'ie8'})))
+    .pipe(gulpif(pathConfig.isProd, autoprefixer()))
+    .pipe(gulpif(pathConfig.isDevelop, sourcemaps.write('./')))
+    .pipe(gulp.dest(pathConfig.assets.css))
+
+    .pipe(browser.reload({stream: true}));
+}
+
+
+export const stylesDevelop = () => gulp.watch(`${pathConfig.src.sass}/**/*.sass`, stylesBuild).on('change', browser.reload.bind(null, {stream: true}));

gulpfile.js

@@ -1,160 +1,43 @@
-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('./'))
+import gulp from 'gulp';
+import {assetsDevelop, assetsBuild} from './gulp/tasks/assets.js';
+import {clean} from './gulp/tasks/clean.js';
+import {imagesDevelop, imagesBuild} from './gulp/tasks/images.js';
+import {phpDevelop} from './gulp/tasks/php.js'
+import {scriptsDevelop, scriptsBuild} from './gulp/tasks/scripts.js'
+import {startServer} from './gulp/tasks/server.js'
+import {stylesDevelop, stylesBuild} from './gulp/tasks/styles.js'
+import pathConfig from './gulp/paths.js';
 
 
-    //TODO создавать файл .sass фаайл в src/pages с именем созданного файла в templates
+// Определяем режим разработки
+pathConfig.setEnv();
 
-}
+console.log('\x1b[32m*** START', pathConfig.isDevelop ? 'DEVELOP' : 'BUILD', ' ***');
 
-exports.minImg = compressImages;
-exports.getcss = getCss;
-exports.getjs = getJs;
-exports.check = check;
-exports.build = build;
-exports.develop = parallel(check, startServer);
+export const build = gulp.series(
+  gulp.parallel(
+    clean.bind(null, pathConfig.assets.js),
+    clean.bind(null, pathConfig.assets.css),
+    clean.bind(null, pathConfig.assets.fonts),
+    clean.bind(null, pathConfig.assets.img),
+    clean.bind(null, pathConfig.assets.libs),
+  ),
+  gulp.parallel(
+    scriptsBuild,
+    stylesBuild,
+    assetsBuild,
+    imagesBuild,
+  ),
+)
+
+export const develop = gulp.series(
+  build,
+  startServer,
+  gulp.parallel(
+    scriptsDevelop,
+    stylesDevelop,
+    assetsDevelop,
+    imagesDevelop,
+    phpDevelop,
+  ),
+);

package.json

@@ -8,17 +8,21 @@
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^7.0.1",
+    "gulp-changed": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-header": "^2.0.9",
     "gulp-if": "^3.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-newer": "^1.4.0",
+    "gulp-rename": "^1.4.0",
     "gulp-sass": "^4.1.0",
     "gulp-sourcemaps": "^3.0.0",
+    "gulp-uglify": "^3.0.2",
     "gulp-uglify-es": "^2.0.0",
     "imagemin-giflossy": "^5.1.10",
     "imagemin-mozjpeg": "^9.0.0",
     "imagemin-pngquant": "^9.0.2",
+    "imagemin-webp": "^6.0.0",
     "imagemin-zopfli": "^7.0.0",
     "module-alias": "^2.2.2",
     "node-sass": "^5.0.0",
@@ -26,11 +30,11 @@
   },
   "scripts": {
     "dev": "gulp develop --develop",
-    "dev::prod": "gulp develop --production",
     "build::dev": "gulp build --develop",
-    "build::prod": "gulp build --production"
+    "build::prod": "gulp build --prod"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "type": "module"
 }

src/img/quests/quest-key-big-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="30"><g fill="#FFF"><path d="M9.135 22.776c0-1.229-.963-2.225-2.152-2.225-.357 0-.708.092-1.022.27a2.107 2.107 0 00-2.15-.764 2.185 2.185 0 00-1.608 1.664c-.184.826.103 1.69.74 2.224a2.28 2.28 0 00.368 2.629 2.096 2.096 0 002.543.384 2.107 2.107 0 002.15.762 2.185 2.185 0 001.608-1.663 2.264 2.264 0 00-.74-2.224c.172-.324.262-.687.263-1.057zm-1.614 3.895a1.078 1.078 0 01-1.005-.73.544.544 0 00-.4-.354.527.527 0 00-.5.168c-.2.229-.485.36-.784.36-.595 0-1.076-.499-1.076-1.113 0-.31.126-.605.348-.813a.568.568 0 00.162-.517.551.551 0 00-.342-.413 1.113 1.113 0 01-.7-1.172c.058-.51.448-.914.942-.973.494-.06.963.24 1.132.724a.543.543 0 00.4.353.527.527 0 00.5-.168c.201-.229.486-.36.785-.36.594 0 1.076.499 1.076 1.113 0 .31-.126.605-.348.813a.568.568 0 00-.162.517c.037.19.167.346.342.413.49.185.78.706.688 1.237-.09.53-.537.916-1.058.915z"/><path d="M26.245 7.739c.514.51 1.323.51 1.837 0l.538-.56a1.392 1.392 0 000-1.91l-1.233-1.284.964-1.003c.425-.441.59-1.084.435-1.687A1.714 1.714 0 0027.6.06a1.636 1.636 0 00-1.623.452L11.748 15.31a2.02 2.02 0 00-1.107.591l-.493.513c-1.027-.119-1.975.584-2.201 1.633-2.154-1.507-5.052-1.092-6.733.965-1.68 2.057-1.608 5.099.168 7.067-.832.296-1.355 1.153-1.259 2.063.097.91.787 1.627 1.661 1.727.875.1 1.699-.443 1.984-1.31a4.955 4.955 0 006.795.177c1.978-1.749 2.377-4.764.927-7.004 1.008-.235 1.685-1.221 1.57-2.289l.493-.513c.3-.313.5-.716.57-1.152l8.198-8.525 1.234 1.283c.507.528 1.33.528 1.837 0l.538-.56a1.393 1.393 0 000-1.91.236.236 0 010-.328.186.186 0 01.157-.089c.064 0 .123.034.158.089zm.492-6.436a.589.589 0 01.854 0 .64.64 0 01.177.444.64.64 0 01-.177.444L13.91 16.42a1.902 1.902 0 00-.854-.888l13.68-14.229zm-24.74 27.46c-.446 0-.807-.377-.807-.84 0-.464.361-.84.807-.84.446 0 .807.376.807.84 0 .463-.361.84-.807.84zm8.106-1.108a3.926 3.926 0 01-5.696 0l-2.152-2.239c-1.573-1.636-1.573-4.288 0-5.924a3.919 3.919 0 015.696 0l.538.56 1.076 1.119.538.56c1.569 1.637 1.569 4.286 0 5.924zm1.615-7.276a.959.959 0 01-1.392 0L9.25 19.26a1.053 1.053 0 01.015-1.432.957.957 0 011.376-.015l1.077 1.119c.383.4.383 1.047 0 1.447zm1.076-2.238l-.174.18a1.946 1.946 0 00-.142-.18l-1.076-1.12a1.993 1.993 0 00-.174-.147l.174-.18a.957.957 0 011.377.015c.378.393.385 1.03.015 1.432zM25.169 6.948a1.393 1.393 0 000 1.91.239.239 0 010 .328l-.538.56a.186.186 0 01-.157.089.186.186 0 01-.158-.09l-1.234-1.282 3.544-3.686 1.233 1.283a.239.239 0 010 .328l-.538.56a.186.186 0 01-.157.088.186.186 0 01-.157-.088 1.295 1.295 0 00-1.838 0z"/></g></svg>

src/img/quests/quest-people-big-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="27"><g fill="#FFF"><path fill-rule="nonzero" d="M18.857 12.735c-3.473 0-6.225-2.882-6.225-6.367C12.632 2.882 15.45 0 18.857 0c3.474 0 6.226 2.882 6.226 6.368 0 3.485-2.752 6.367-6.226 6.367zm0-11.461c-2.752 0-4.915 2.278-4.915 5.027 0 2.815 2.228 5.027 4.915 5.027s4.915-2.28 4.915-5.027c0-2.749-2.162-5.027-4.915-5.027zM30.37 25.722H8.025c-.393 0-.656-.268-.656-.67 0-6.703 5.309-12.133 11.862-12.133s11.862 5.43 11.862 12.133c-.066.402-.328.67-.721.67zm-21.69-1.34h21.035C29.388 18.75 24.8 14.26 19.23 14.26c-5.636.067-10.223 4.49-10.55 10.121z"/><path d="M25.828 12.735c-.786 0-1.572-.134-2.228-.402-.327-.134-.524-.536-.393-.871.131-.335.524-.536.852-.402a4.905 4.905 0 001.77.335c2.752 0 4.914-2.28 4.914-5.027 0-2.816-2.228-5.027-4.915-5.027-.59 0-1.18.134-1.769.335a.626.626 0 01-.852-.402c-.131-.403 0-.738.393-.872A6.254 6.254 0 0125.828 0c3.474 0 6.226 2.882 6.226 6.368 0 3.485-2.818 6.367-6.226 6.367zm13.419 13.104h-5.405c-.41 0-.684-.25-.684-.623 0-.374.274-.624.684-.624h4.721c-.137-2.555-1.3-4.861-3.216-6.544-2.052-1.808-4.79-2.805-7.8-2.805H27c-.41 0-.684-.25-.684-.624s.273-.623.684-.623h.616c3.352 0 6.431 1.122 8.758 3.117C38.7 19.17 40 22.037 40 25.216c-.068.374-.342.623-.753.623zM11.489 12.735c-3.473 0-6.226-2.882-6.226-6.367C5.263 2.882 8.081 0 11.49 0c.786 0 1.507.134 2.228.402.328.134.524.536.393.872-.13.335-.524.536-.852.402a4.905 4.905 0 00-1.77-.335c-2.752 0-4.914 2.278-4.914 5.027 0 2.815 2.228 5.027 4.915 5.027.655 0 1.245-.134 1.77-.335.327-.134.72 0 .851.402.131.335 0 .737-.393.871-.655.268-1.442.402-2.228.402zM6.422 26.731H.655c-.393 0-.655-.268-.655-.67 0-3.351 1.245-6.435 3.473-8.713 2.163-2.145 5.177-3.352 8.389-3.352h.458c.394 0 .656.268.656.67 0 .403-.262.67-.656.67h-.458c-2.884 0-5.505 1.073-7.471 3.017-1.835 1.81-2.884 4.29-3.015 7.038h5.046c.394 0 .656.268.656.67s-.262.67-.656.67z"/></g></svg>

src/img/quests/quest-time-big-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="30"><g fill="#FFF"><path d="M17.624 0H1.376C.629 0 0 .632 0 1.404v2.994c0 .772.63 1.41 1.376 1.41h.29v2.1c0 1.015.444 1.96 1.209 2.592l5.428 4.494-5.33 4.27a3.34 3.34 0 00-1.246 2.623v2.304h-.351c-.747 0-1.376.632-1.376 1.411v2.994C0 29.368.63 30 1.376 30h16.242c.747 0 1.376-.632 1.376-1.404v-2.994c0-.772-.63-1.41-1.376-1.41h-.222V21.9a3.376 3.376 0 00-1.265-2.643l-5.428-4.276 5.422-4.487a3.348 3.348 0 001.21-2.592V5.81h.29c.746 0 1.375-.632 1.375-1.411V1.404C19 .632 18.37 0 17.624 0zm-.105 25.723v2.745H1.481v-2.745h16.038zm-2.282-5.246c.426.338.679.868.679 1.423v2.291H3.208v-2.304c0-.549.253-1.078.672-1.41L9.5 15.97l5.737 4.507zm.617-12.568a1.82 1.82 0 01-.648 1.397L9.5 14.017 3.794 9.3a1.8 1.8 0 01-.654-1.398V5.81h12.708v2.1h.006zm1.665-3.632H1.481V1.532h16.038v2.745z"/></g></svg>

src/sass/pages/graduation.sass

@@ -243,7 +243,7 @@ main
 
 .top__menu
   position: fixed
-  height: 96px
+  height: 26px
   top: 0
   left: 0
   right: 0

templates/holiday.php

@@ -32,8 +32,12 @@
       document.querySelector('.ent-container h2').textContent = '<?php the_field('step-head-1', 24)?>';
       let descr = document.createElement('p');
       descr.textContent = `<?php the_field('step-descr-1', 24)?>`;
-      document.querySelector('.ent-container h2').insertAdjacentElement('afterend', descr)
-      document.querySelector('.places h2').textContent = `<?php the_field('step-head-2', 24)?>`;
+      // document.querySelector('.ent-container h2').insertAdjacentElement('afterend', descr);
+
+      // document.querySelector('.places h2').textContent = `<?php the_field('step-head-2', 24)?>`;
+      // let placesDescr = document.createElement('p');
+      // placesDescr.textContent = `<?php the_field('step-descr-2', 24)?>`;
+      // document.querySelector('.places h2').insertAdjacentElement('afterend', placesDescr);
     </script>
   <?php
   }