Merge pull request #51 from firefoxic/firefoxic/issue50

Больше улучшений сборки

Author: nikolai-shabalin

.gitignore

@@ -3,5 +3,8 @@ node_modules
 build
 .idea
 .DS_Store
-source/.raw/
-!source/.raw/**/README.md
+raw/**/*.jpg
+raw/**/*.jpeg
+raw/**/*.png
+raw/**/*.svg
+!raw/**/README.md

README.md

@@ -67,10 +67,14 @@
 │   └── workflows/                # Автоматизация для github actions
 │       ├── check.yml             # Запускает линтеры на Гитхабе
 │       └── gh-pages.yml          # Публикует проект и создаёт ссылку на проект
+├── raw/                          # Папка для «сырых» файлов (игнорируются гитом)
+│   └── images/                   # Папка для оригиналов картинок
+│       └── icons/                # Папка для оригиналов svg-иконок
 ├── source/                       # Исходники проекта
+│   ├── favicons/                 # Папка для фавиконок (кроме favicon.ico)
 │   ├── fonts/                    # Папка для шрифтов
-│   ├── images/                   # Папка для хранения картинок
-│   │   └── icons/                # Специальная папка для преобразования svg в спрайт(stack)
+│   ├── images/                   # Папка для оптимизированных картинок
+│   │   └── icons/                # Папка для оптимизированных svg-иконок для преобразования их в спрайт (stack)
 │   ├── scripts/                  # Скрипты
 │   │   └── index.js              # Главный скрипт
 │   ├── styles/                   # Папка для препроцессорных файлов sass
@@ -101,7 +105,7 @@
 
 ## Дополнительные команды
 
-- `npm run optimizeImages` - создаёт оптимизированные изображения в `source/images/`
+- `npm run optimizeImages` - создаёт оптимизированные изображения в `source/images/` и `source/icons/`
 - `npm run preview` - позволяет посмотреть результат работы prod-версии сборки
 - `npm run lint` - запускает все проверки (занимает длительное время)
 - `npm run lint:bem` - проверяет правильное использование БЭМ в разметке
@@ -171,33 +175,60 @@
 
 ## Работа с графикой
 
-Абсолютно всю растровую графику с двухкратной плотностью из макета складывайте в `source/.raw`. Здесь графика игнорируется гитом.
+### Растр
+
+Абсолютно всю растровую графику с двухкратной плотностью из макета складывайте в `raw/images/`. Здесь графика игнорируется гитом.
 
 После того как добавите графику сразу запускайте команду `npm run optimizeImages` для оптимизации графики и создания `.webp`-версии. Команду нужно запускать один раз при появлении новой графики в проекте.
 
 Новая оптимизированная графика разной плотностью и суффиксами плотности в именах файлов появится в `source/images`. Эту, уже оптимизированную графику нужно коммитить.
 
-Векторную графику для спрайта складывайте в `source/images/icons/`. Автоматизация создаст из иконок файл `stack.svg`.
+### Вектор
+
+Контентную векторную графику (логотип, графики, иллюстрации) также складывайте в `raw/images/`. Запуск той же команды `npm run optimizeImages` поместит оптимизированные копии этих svg-файлов в `source/images/`
+
+```shell
+└── raw/
+    └── images/
+```
+
+Векторную графику для спрайта (иконки) складывайте в `raw/icons/`. Запуск той же команды `npm run optimizeImages` поместит оптимизированные копии этих svg-файлов в `source/images/`.
 
 ```shell
 └── source/
-    ├── .raw/
     └── images/
         └── icons/
 ```
 
-Всю графику автоматизация перенесёт в `build/images/`.
+При сборке автоматизация перенесёт всю графику из `source/images/` в `build/images/`, а из иконок в `source/images/icons/` создаст спрайт `build/images/icons/stack.svg`.
 
 ```shell
 └── build/
     └── images/
-        ├── icons                 # папка для спрайта
+        ├── icons/                # папка для спрайта
         │   └── stack.svg         # спрайт
         ├── bg.jpg
         ├── bg.webp
         ├── hero.png
         ├── hero.webp
-        └── burger.svg
+        └── logo.svg
+```
+
+### Фавиконки
+
+Варианты фавиконок форматов PNG и SVG следует размещать в `source/favicons/`.
+
+Файлы `favicon.ico` и `manifest.webmanifest` — в `source/`:
+
+```shell
+└── source/
+    ├── favicons/
+    │   ├── 180.png
+    │   ├── 192.png
+    │   ├── 512.png
+    │   └── icon.svg
+    ├── favicon.ico
+    └── manifest.webmanifest
 ```
 
 ## Работа со шрифтами
@@ -208,9 +239,7 @@
 └── build/
     └── fonts/
         ├──  open-sans.woff2
-        ├──  open-sans.woff
-        ├──  open-sans-bold.woff
-        └──  open-sans-bold.woff
+        └──  open-sans-bold.woff2
 
 ```
 

gulpfile.js

@@ -1,53 +1,84 @@
+import { readFileSync, rmSync } from 'node:fs';
+
 import gulp from 'gulp';
 import plumber from 'gulp-plumber';
+import { nunjucksCompile } from 'gulp-nunjucks';
+import htmlmin from 'gulp-htmlmin';
 import * as dartSass from 'sass';
 import gulpSass from 'gulp-sass';
 import postcss from 'gulp-postcss';
 import postUrl from 'postcss-url';
 import autoprefixer from 'autoprefixer';
 import csso from 'postcss-csso';
-import terser from 'gulp-terser';
+import { createGulpEsbuild } from 'gulp-esbuild';
+import browserslistToEsbuild from 'browserslist-to-esbuild';
 import sharp from 'gulp-sharp-responsive';
 import svgo from 'gulp-svgmin';
 import { stacksvg } from 'gulp-stacksvg';
-import { deleteAsync } from 'del';
-import browser from 'browser-sync';
+import server from 'browser-sync';
 import bemlinter from 'gulp-html-bemlinter';
 
+const { src, dest, watch, series, parallel } = gulp;
 const sass = gulpSass(dartSass);
+const PATH_TO_SOURCE = './source/';
+const PATH_TO_DIST = './build/';
+const PATH_TO_RAW = './raw/';
+const PATHS_TO_STATIC = [
+  `${PATH_TO_SOURCE}fonts/**/*.{woff2,woff}`,
+  `${PATH_TO_SOURCE}*.ico`,
+  `${PATH_TO_SOURCE}*.webmanifest`,
+  `${PATH_TO_SOURCE}favicons/*.{png,svg}`,
+  `${PATH_TO_SOURCE}vendor/**/*`,
+  `${PATH_TO_SOURCE}images/**/*`,
+  `!${PATH_TO_SOURCE}images/icons/**/*`,
+  `!${PATH_TO_SOURCE}**/README.md`,
+];
 let isDevelopment = true;
 
 export function processMarkup () {
-  return gulp.src('source/*.html')
-    .pipe(gulp.dest('build'));
+  return src(`${PATH_TO_SOURCE}**/*.html`)
+    .pipe(nunjucksCompile())
+    .pipe(htmlmin({ collapseWhitespace: !isDevelopment }))
+    .pipe(dest(PATH_TO_DIST))
+    .pipe(server.stream());
 }
 
 export function lintBem () {
-  return gulp.src('source/*.html')
+  return src(`${PATH_TO_SOURCE}*.html`)
     .pipe(bemlinter());
 }
 
 export function processStyles () {
-  return gulp.src('source/styles/*.scss', { sourcemaps: isDevelopment })
+  return src(`${PATH_TO_SOURCE}styles/*.scss`, { sourcemaps: isDevelopment })
     .pipe(plumber())
     .pipe(sass().on('error', sass.logError))
     .pipe(postcss([
       postUrl({ assetsPath: '../' }),
       autoprefixer(),
       csso()
     ]))
-    .pipe(gulp.dest('build/styles', { sourcemaps: isDevelopment }))
-    .pipe(browser.stream());
+    .pipe(dest(`${PATH_TO_DIST}styles`, { sourcemaps: isDevelopment }))
+    .pipe(server.stream());
 }
 
 export function processScripts () {
-  return gulp.src('source/scripts/**/*.js')
-    .pipe(terser())
-    .pipe(gulp.dest('build/scripts'))
-    .pipe(browser.stream());
+  const gulpEsbuild = createGulpEsbuild({ incremental: isDevelopment });
+
+  return src(`${PATH_TO_SOURCE}scripts/*.js`)
+    .pipe(gulpEsbuild({
+      bundle: true,
+      format: 'esm',
+      // splitting: true,
+      platform: 'browser',
+      minify: !isDevelopment,
+      sourcemap: isDevelopment,
+      target: browserslistToEsbuild(),
+    }))
+    .pipe(dest(`${PATH_TO_DIST}scripts`))
+    .pipe(server.stream());
 }
 
-export function optimizeImages () {
+export function optimizeRaster () {
   const RAW_DENSITY = 2;
   const TARGET_FORMATS = [undefined, 'webp']; // undefined — initial format: jpg or png
 
@@ -70,90 +101,119 @@ export function optimizeImages () {
     return { formats };
   }
 
-  return gulp.src('source/.raw/**/*.{png,jpg,jpeg}')
+  return src(`${PATH_TO_RAW}images/**/*.{png,jpg,jpeg}`)
     .pipe(sharp(createOptionsFormat()))
-    .pipe(gulp.dest('source/images'));
+    .pipe(dest(`${PATH_TO_SOURCE}images`));
 }
 
 export function optimizeVector () {
-  return gulp.src(['source/images/**/*.svg', '!source/images/icons/**/*.svg'])
+  return src([`${PATH_TO_RAW}**/*.svg`])
     .pipe(svgo())
-    .pipe(gulp.dest('build/images'));
+    .pipe(dest(PATH_TO_SOURCE));
+}
+
+export function optimizeImages (done) {
+  parallel(
+    optimizeVector,
+    optimizeRaster
+  )(done);
 }
 
 export function createStack () {
-  return gulp.src('source/images/icons/**/*.svg')
-    .pipe(svgo())
+  return src(`${PATH_TO_SOURCE}images/icons/**/*.svg`)
     .pipe(stacksvg())
-    .pipe(gulp.dest('build/images/icons'));
+    .pipe(dest(`${PATH_TO_DIST}images/icons`));
 }
 
 export function copyAssets () {
-  return gulp.src([
-    'source/fonts/**/*.{woff2,woff}',
-    'source/*.ico',
-    'source/*.webmanifest',
-    'source/vendor/**/*',
-    'source/images/**/*',
-    '!source/images/icons/**/*',
-    '!source/**/README.md',
-  ], {
-    base: 'source'
-  })
-    .pipe(gulp.dest('build'));
+  return src(PATHS_TO_STATIC, { base: PATH_TO_SOURCE })
+    .pipe(dest(PATH_TO_DIST));
 }
 
-export function startServer (done) {
-  browser.init({
+export function startServer () {
+  server.init({
     server: {
-      baseDir: 'build'
+      baseDir: PATH_TO_DIST
     },
+    serveStatic: [
+      {
+        route: '/fonts',
+        dir: `${PATH_TO_SOURCE}fonts`,
+      },
+      {
+        route: '/*.ico',
+        dir: `${PATH_TO_SOURCE}*.ico`,
+      },
+      {
+        route: '/*.webmanifest',
+        dir: `${PATH_TO_SOURCE}*.webmanifest`,
+      },
+      {
+        route: '/favicons',
+        dir: `${PATH_TO_SOURCE}favicons`,
+      },
+      {
+        route: '/vendor',
+        dir: `${PATH_TO_SOURCE}vendor`,
+      },
+      {
+        route: '/images',
+        dir: `${PATH_TO_SOURCE}images`,
+      },
+    ],
     cors: true,
     notify: false,
     ui: false,
+  }, (err, bs) => {
+    bs.addMiddleware('*', (req, res) => {
+      res.write(readFileSync(`${PATH_TO_DIST}404.html`));
+      res.end();
+    });
   });
-  done();
+
+  watch(`${PATH_TO_SOURCE}**/*.{html,njk}`, series(processMarkup));
+  watch(`${PATH_TO_SOURCE}styles/**/*.scss`, series(processStyles));
+  watch(`${PATH_TO_SOURCE}scripts/**/*.js`, series(processScripts));
+  watch(`${PATH_TO_SOURCE}images/icons/**/*.svg`, series(createStack, reloadServer));
+  watch(PATHS_TO_STATIC, series(copyAssets, reloadServer));
 }
 
 function reloadServer (done) {
-  browser.reload();
+  server.reload();
   done();
 }
 
-function watchFiles () {
-  gulp.watch('source/styles/**/*.scss', gulp.series(processStyles));
-  gulp.watch('source/scripts/**/*.js', gulp.series(processScripts));
-  gulp.watch('source/*.html', gulp.series(processMarkup, reloadServer));
-}
-
-function compileProject (done) {
-  gulp.parallel(
-    processMarkup,
-    processStyles,
-    processScripts,
-    optimizeVector,
-    createStack,
-    copyAssets,
-  )(done);
-}
-
-function deleteBuild () {
-  return deleteAsync('build');
+export function removeBuild (done) {
+  rmSync(PATH_TO_DIST, {
+    force: true,
+    recursive: true,
+  });
+  done();
 }
 
 export function buildProd (done) {
   isDevelopment = false;
-  gulp.series(
-    deleteBuild,
-    compileProject
+  series(
+    removeBuild,
+    parallel(
+      processMarkup,
+      processStyles,
+      processScripts,
+      createStack,
+      copyAssets,
+    ),
   )(done);
 }
 
 export function runDev (done) {
-  gulp.series(
-    deleteBuild,
-    compileProject,
+  series(
+    removeBuild,
+    parallel(
+      processMarkup,
+      processStyles,
+      processScripts,
+      createStack,
+    ),
     startServer,
-    watchFiles
   )(done);
 }