Добавлен сборщик js модулей + рефакторинг кода

gulpfile.js

@@ -1,23 +1,23 @@
 import gulp from 'gulp';
-const { src, dest, watch, parallel, series } = gulp;
 import autoprefixer from 'autoprefixer';
 import browser from 'browser-sync';
 import cheerio from 'gulp-cheerio';
-import postcss from 'gulp-postcss';
 import csso from 'postcss-csso';
 import data from 'gulp-data';
 import { deleteSync } from 'del';
 import fs from 'fs';
 import notify from 'gulp-notify';
 import plumber from 'gulp-plumber';
+import postcss from 'gulp-postcss';
 import rename from 'gulp-rename';
 import render from 'gulp-nunjucks-render';
 import sass from 'gulp-dart-sass';
+import sharpOptimizeImages from 'gulp-sharp-optimize-images';
+import sourcemaps from 'gulp-sourcemaps';
 import svgmin from 'gulp-svgmin';
 import svgstore from 'gulp-svgstore';
-import sharpOptimizeImages from "gulp-sharp-optimize-images";
-import terser from 'gulp-terser';
-import sourcemaps from 'gulp-sourcemaps';
+import webpack from 'webpack-stream';
+const { src, dest, watch, parallel, series } = gulp;
 
 /**
  *  Основные директории
@@ -67,6 +67,20 @@ const path = {
   }
 };
 
+const imageOptimizeConfigs = {
+  webp: {
+    quality: 80,
+    lossless: false,
+  },
+  png_to_png: {
+    quality: 80,
+    lossless: false,
+  },
+  jpg_to_jpg: {
+    quality: 80,
+    mozjpeg: true,
+  }
+}
 
 /**
  * Основные задачи
@@ -100,10 +114,10 @@ export const templates = () => src(`${path.templates.pages}*.j2`)
 
 export const scripts = () => src(`${path.scripts.root}**/*.js`)
   .pipe(sourcemaps.init())
-  .pipe(terser({
-    keep_fnames: true,
-    mangle: false,
-    module: true,
+  .pipe(webpack({
+    output: {
+      filename: 'script.min.js',
+    }
   }))
   .pipe(sourcemaps.write('./'))
   .pipe(dest(path.scripts.save));
@@ -153,42 +167,14 @@ export const sprite = () => src(`${path.img.icons}**/*.svg`)
   .pipe(rename('sprite.svg'))
   .pipe(dest(path.img.save))
 
-export const img = ()  => src(`${path.img.root}/**/*.{png,jpg}`)
+export const img = ()  => src(`${path.img.root}/**/*.{png,jpg,jpeg}`)
   .pipe(plumber())
-  .pipe(sharpOptimizeImages({
-      webp: {
-        quality: 80,
-        lossless: false,
-      },
-      png_to_png: {
-        quality: 80,
-        lossless: false,
-      },
-      jpg_to_jpg: {
-        quality: 80,
-        mozjpeg: true,
-      },
-    })
-  )
+  .pipe(sharpOptimizeImages(imageOptimizeConfigs))
   .pipe(dest(path.img.save));
 
-export const images = ()  => src(`${path.images.root}/**/*.{png,jpg}`)
+export const images = ()  => src(`${path.images.root}/**/*.{png,jpg,jpeg}`)
   .pipe(plumber())
-  .pipe(sharpOptimizeImages({
-      webp: {
-        quality: 80,
-        lossless: false,
-      },
-      png_to_png: {
-        quality: 80,
-        lossless: false,
-      },
-      jpg_to_jpg: {
-        quality: 80,
-        mozjpeg: true,
-      },
-    })
-  )
+  .pipe(sharpOptimizeImages(imageOptimizeConfigs))
   .pipe(dest(path.images.save));
 
 const fonts = () => src(`${dirs.src}/fonts/*.{woff,woff2}`)
@@ -203,10 +189,10 @@ const vendorScripts = () => src(`${path.vendor.scripts}*.min.js`)
 export const vendor = parallel(vendorStyles, vendorScripts);
 
 const pixelGlass = () => src(`node_modules/pixel-glass/{styles.css,script.js}`)
-  .pipe(dest(`${dirs.dest}/pp/`))
+  .pipe(dest(`${dirs.dest}/static/pp/`))
 
-export const pp = () => src(`${dirs.src}/pp/*`)
-  .pipe(dest(`${dirs.dest}/pp/`))
+export const pp = () => src(`${dirs.src}/static/pp/*`)
+  .pipe(dest(`${dirs.dest}/static/pp/`))
 
 export const server = () => {
   const bs = browser.init({

package.json

@@ -23,14 +23,15 @@
     "gulp-sourcemaps": "latest",
     "gulp-svgmin": "latest",
     "gulp-svgstore": "latest",
-    "gulp-terser": "latest",
     "pixel-glass": "github:makehtml/pixel-glass",
     "postcss-csso": "latest",
     "postcss-scss": "latest",
     "stylelint": "latest",
     "stylelint-config-recess-order": "latest",
     "stylelint-config-standard": "latest",
-    "stylelint-scss": "latest"
+    "stylelint-scss": "latest",
+    "webpack": "latest",
+    "webpack-stream": "latest"
   },
   "browserslist": [
     "last 2 version",

src/static/js/modules/functions.js

@@ -0,0 +1,15 @@
+const isWebP = () => {
+  const testWebP = (callback) => {
+    let webP = new Image();
+    webP.onload = webP.onerror = function () {
+      callback(webP.height === 2);
+    };
+    webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA";
+  }
+  testWebP((support) => {
+    let className = support === true ? 'webp' : 'no-webp';
+    document.querySelector('body').classList.add(className);
+  });
+}
+
+export {isWebP};

src/static/js/modules/test.js

@@ -0,0 +1,5 @@
+const test = () => {
+  console.log('Привет из файла скрипта');
+}
+
+export {test};

src/static/js/script.js

@@ -1,5 +1,5 @@
-const test = () => {
-  console.info('Привет из файла скриптов.');
-}
+import {isWebP} from './modules/functions.js';
+import {test} from './modules/test.js';
 
-export {test};
+isWebP();
+test();

src/templates/base.j2

@@ -15,12 +15,12 @@
         background-position:  50% 0;
         background-image: url("pp/{{ page }}-mobile.jpg");
       }
-      @media (min-width: 834px) { html { background-image: url("pp/{{ page }}-tablet.jpg"); } }
-      @media (min-width: 1440px) { html { background-image: url("pp/{{ page }}-desktop.jpg"); } }
+      @media (min-width: 834px) { html { background-image: url("static/pp/{{ page }}-tablet.jpg"); } }
+      @media (min-width: 1440px) { html { background-image: url("static/pp/{{ page }}-desktop.jpg"); } }
       * { outline: 1px solid rgba(255,100,0,.2); }
     </style>
-    <link href="{{ url_for('static', filename='../pp/styles.css') }}" rel="stylesheet">
-    <script src="{{ url_for('static', filename='../pp/script.js') }}"></script>
+    <link href="{{ url_for('static', filename='pp/styles.css') }}" rel="stylesheet">
+    <script src="{{ url_for('static', filename='pp/script.js') }}"></script>
   {% endif %}
 </head>
 <body>
@@ -46,7 +46,7 @@
   <script>
     console.log('Привет из инлайн-скрипта, отрабатывает на всех страницах.');
   </script>
-  <script src="{{ url_for('static', filename='js/main.js') }}" type="module"></script>
+  <script src="{{ url_for('static', filename='js/script.min.js') }}"></script>
 
   {% block js %}{% endblock js %}
 </body>