Добавлена обработка изображения + обновление конфигурации

1. Добавлена обработка изображений 2. Добавлен sourcemap для стилей и скриптов 3. Сделано модульное подключение скриптов 4. Исправлены пути скриптов и стилей для pixelGlass 5. Добавлено удаление папки build перед сборкой
makehtml · Apr 4, 2023 · 33c0407 · 33c0407
1 parent dc3f206
commit 33c0407
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 50 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,12 +1,12 @@
 import gulp from 'gulp';
 const { src, dest, watch, parallel, series } = gulp;
-import autoprefixer from 'gulp-autoprefixer';
+import autoprefixer from 'autoprefixer';
 import browser from 'browser-sync';
-import concat from 'gulp-concat';
 import cheerio from 'gulp-cheerio';
-// import csso from 'gulp-csso';
+import postcss from 'gulp-postcss';
+import csso from 'postcss-csso';
 import data from 'gulp-data';
-// import del from 'del';
+import { deleteSync } from 'del';
 import fs from 'fs';
 import notify from 'gulp-notify';
 import plumber from 'gulp-plumber';
@@ -15,7 +15,9 @@ import render from 'gulp-nunjucks-render';
 import sass from 'gulp-dart-sass';
 import svgmin from 'gulp-svgmin';
 import svgstore from 'gulp-svgstore';
-// import uglify from 'gulp-uglify';
+import sharpOptimizeImages from "gulp-sharp-optimize-images";
+import terser from 'gulp-terser';
+import sourcemaps from 'gulp-sourcemaps';
 
 /**
  *  Основные директории
@@ -43,6 +45,7 @@ const path = {
   json: `${dirs.src}/data.json`,
   scripts: {
     root: `${dirs.src}/static/js/`,
+    compile: `${dirs.src}/static/js/main.js`,
     save: `${dirs.dest}/static/js/`
   },
   fonts: {
@@ -64,21 +67,24 @@ const path = {
   }
 };
 
+
 /**
  * Основные задачи
  */
 export const css = () => src(path.styles.css)
   .pipe(dest(path.styles.save))
 
-export const styles = () => src(path.styles.compile)
+export const styles = () => src(path.styles.compile, { sourcemaps: true })
+  .pipe(plumber())
   .pipe(sass.sync().on('error', sass.logError))
-  .pipe(dest(path.styles.save))
-  .pipe(autoprefixer())
-  // .pipe(csso())
+  .pipe(postcss([
+    autoprefixer(),
+    csso()
+  ]))
   .pipe(rename({
     suffix: `.min`
   }))
-  .pipe(dest(path.styles.save));
+  .pipe(dest(path.styles.save, { sourcemaps: '.' }));
 
 export const templates = () => src(`${path.templates.pages}*.j2`)
   .pipe(plumber())
@@ -92,48 +98,45 @@ export const templates = () => src(`${path.templates.pages}*.j2`)
   }))
   .pipe(dest(path.templates.save));
 
-export const scripts = () => src(`${path.scripts.root}*.js`)
-  .pipe(concat('script.js'))
-  .pipe(dest(path.scripts.save))
-  .pipe(rename({
-    suffix: '.min'
+export const scripts = () => src(`${path.scripts.root}**/*.js`)
+  .pipe(sourcemaps.init())
+  .pipe(terser({
+    keep_fnames: true,
+    mangle: false,
+    module: true,
   }))
+  .pipe(sourcemaps.write('./'))
   .pipe(dest(path.scripts.save));
 
-// export const clean = () => del([dirs.dest]);
-
-export const server = () => {
-  const bs = browser.init({
-    server: dirs.dest,
-    cors: true,
-    notify: false,
-    ui: false,
-    open: false
-  });
-  watch(path.styles.css, css).on('change', bs.reload);
-  watch(`${path.styles.root}**/*.scss`, styles).on('change', bs.reload);
-  watch(`${path.templates.root}**/*.j2`, templates).on('change', bs.reload);
-  watch(`${path.json}`, templates).on('change', bs.reload);
-  watch(`${path.scripts.root}**/*.js`, scripts).on('change', bs.reload);
-};
+export const clean = (done) => {
+  deleteSync([dirs.dest]);
+  done();
+}
 
 export const sprite = () => src(`${path.img.icons}**/*.svg`)
   .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
   .pipe(svgmin({
     plugins: [{
-      removeDoctype: true
+      name: 'removeDoctype',
+      active: true
     }, {
-      removeXMLNS: true
+      name: 'removeXMLNS',
+      active : true
     }, {
-      removeXMLProcInst: true
+      name: 'removeXMLProcInst',
+      active: true
     }, {
-      removeComments: true
+      name: 'removeComments',
+      active: true
     }, {
-      removeMetadata: true
+      name: 'removeMetadata',
+      active: true
     }, {
-      removeEditorNSData: true
+      name: 'removeEditorNSData',
+      active: true
     }, {
-      removeViewBox: false
+      name: 'removeViewBox',
+      active: false
     }]
   }))
   .pipe(cheerio({
@@ -150,8 +153,43 @@ export const sprite = () => src(`${path.img.icons}**/*.svg`)
   .pipe(rename('sprite.svg'))
   .pipe(dest(path.img.save))
 
-const images = () => src(`${path.images.root}/**/*.{png,jpg}`)
-  .pipe(dest(path.images.save))
+export const img = ()  => src(`${path.img.root}/**/*.{png,jpg}`)
+  .pipe(plumber())
+  .pipe(sharpOptimizeImages({
+      webp: {
+        quality: 80,
+        lossless: false,
+      },
+      png_to_png: {
+        quality: 80,
+        lossless: false,
+      },
+      jpg_to_jpg: {
+        quality: 80,
+        mozjpeg: true,
+      },
+    })
+  )
+  .pipe(dest(path.img.save));
+
+export const images = ()  => src(`${path.images.root}/**/*.{png,jpg}`)
+  .pipe(plumber())
+  .pipe(sharpOptimizeImages({
+      webp: {
+        quality: 80,
+        lossless: false,
+      },
+      png_to_png: {
+        quality: 80,
+        lossless: false,
+      },
+      jpg_to_jpg: {
+        quality: 80,
+        mozjpeg: true,
+      },
+    })
+  )
+  .pipe(dest(path.images.save));
 
 const fonts = () => src(`${dirs.src}/fonts/*.{woff,woff2}`)
   .pipe(dest(`${dirs.dest}/static/fonts/`))
@@ -167,17 +205,32 @@ export const vendor = parallel(vendorStyles, vendorScripts);
 const pixelGlass = () => src(`node_modules/pixel-glass/{styles.css,script.js}`)
   .pipe(dest(`${dirs.dest}/pp/`))
 
-const pp = () => src(`${dirs.src}/pp/*`)
+export const pp = () => src(`${dirs.src}/pp/*`)
   .pipe(dest(`${dirs.dest}/pp/`))
 
+export const server = () => {
+  const bs = browser.init({
+    server: dirs.dest,
+    cors: true,
+    notify: false,
+    ui: false,
+    open: false
+  });
+  watch(path.styles.css, css).on('change', bs.reload);
+  watch(`${path.styles.root}**/*.scss`, styles).on('change', bs.reload);
+  watch(`${path.templates.root}**/*.j2`, templates).on('change', bs.reload);
+  watch(`${path.json}`, templates).on('change', bs.reload);
+  watch(`${path.scripts.root}**/*.js`, scripts).on('change', bs.reload);
+};
+
 /**
  * Задачи для разработки
  */
-export const start = series(parallel(fonts, pixelGlass, pp), parallel(images, css, styles, templates, scripts, vendorScripts, sprite), server);
+export const start = series(clean, parallel(fonts, pixelGlass, pp), parallel(img, images, css, styles, templates, scripts, vendor, sprite), server);
 
 /**
  * Для билда
  */
-export const build = series(css, fonts, parallel(images, styles, templates, scripts, vendorScripts, sprite));
+export const build = series(clean, css, fonts, parallel(img, images, styles, templates, scripts, vendor, sprite));
 
 export default start;
diff --git a/package.json b/package.json
@@ -3,27 +3,29 @@
   "version": "3.1.0",
   "description": "Базовый каркас для начала разработки на jinja + sass",
   "devDependencies": {
+    "autoprefixer": "latest",
     "browser-sync": "latest",
     "del": "latest",
     "djlint": "latest",
     "gulp": "latest",
-    "gulp-autoprefixer": "latest",
     "gulp-cheerio": "latest",
     "gulp-concat": "latest",
     "gulp-csscomb": "latest",
     "gulp-dart-sass": "latest",
     "gulp-data": "latest",
-    "gulp-libsquoosh": "latest",
     "gulp-merge-json": "latest",
     "gulp-notify": "latest",
     "gulp-nunjucks-render": "latest",
     "gulp-plumber": "latest",
     "gulp-postcss": "latest",
     "gulp-rename": "latest",
+    "gulp-sharp-optimize-images": "latest",
+    "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",

diff --git a/src/static/js/main.js b/src/static/js/main.js
@@ -0,0 +1,3 @@
+import {test} from "./script.js";
+
+test();
diff --git a/src/static/js/script.js b/src/static/js/script.js
@@ -1,3 +1,5 @@
-(() => {
+const test = () => {
   console.info('Привет из файла скриптов.');
-})();
+}
+
+export {test};
diff --git a/src/templates/base.j2 b/src/templates/base.j2
@@ -19,8 +19,8 @@
       @media (min-width: 1440px) { html { background-image: url("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/script.min.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/main.js') }}" type="module"></script>
 
   {% block js %}{% endblock js %}
 </body>