Я зібрав новий стартовий шаблон для забеспечення швидкого старту верстки та продакш-складання інтернет-проекту на замовлення, за запропонованим Figma- або PSD-макетом. В якості таск-менеджера використовую Gulp 4.
До стартового шблону додав normalize та найпростішу сітку, що прийнята в Web-дизайні. Ширина макету за замовченням складає 1140px. При необхідності це значення змінюється у файлі grid.css. В ньому вказані всі break-points.
До складу стартового шаблона додав: jQuery v3.3.1 jquery.PageScroll2id v1.5.8 Magnific Popup v1.1.0 Owl Carousel v2.3.4 jquery.nicescroll v3.7.6 font-awesome-4.7.0
Щоб підключити/від'єднати потрібні/непотрібні плагіни, фрейворки, інше відкрийте файли:
scss/_libs.scss
gulpfile.js
Встановіть nodejs з підтримкою npm https://nodejs.org/en/ Встановіть git bash, якщо не використовуете консоль, жоден термінал не встановлений на компьютері під керуванням Windows 10 gitforwindows
Встановіть gulp глобально. Ця операция здійснюється одноразово, для цього потрібно у консолі виконати команду
npm install gulp-cli -gЩоб побачити версію Gulp, що інстальований в систему, потрібно виконати команду
gulp -vНа момент написання цієї інструкції отримав наступну відповідь
CLI version 2.0.1
Local version 4.0.0
Щоб побачити версію nodejs, яка інстальована в систему, потрібно виконати команду
node -vЩоб побачити перелік пакетів та версії npm, які інстальовані в систему, потрібно виконати команду
npm list -g --depth=0Щоб почати работу зі стартовим пакетом потрібно:
- створити каталог, в якому буде виконуватись збірка шаблону
- розархівувати архів до створенного каталогу
- відкрити його в VSCode. Для швидкості рекомендую використувати плагін Project Manager під VSC
- в терміналі виконується команда
npm i --legacy-peer-deps
Якщо будуть виникати помилки потрібно виконати наступну команду
npm i
- через декілька хвилин всі пакети збірки будуть встановлені
Після завершеня інсталювання збірки виконайте команду, щоб запустити сервер:
gulpЗа хвилиту автоматично запускается сервер, після чого в браузері відкриється головна сторінка сайту. Необхідно відкрити всі рабочі файли збірки та почати верстку шаблона.
каталог sass - писати scss-код каталог libs/common.js - писати кастомний js-код index.html - виконуется HTML-розмітка шаблону
- Якшо необхідно встановити додаткові плагіни jQuery або Javascript, всі їх файли розміщуються у каталозі libs.
- Якщо необхідно підключити js-файли, необхідно прописати шлях до них в файлі gulpfile.js
- Якщо з'явилася необхідність підключити файли css до збірки, потрібно прописати шлях до них в файлі app/scss/_ libs.scss
В стартому шаблоні передбачено 2 варінта сбірки сторінок html. Якщо ідетья про верстку багатосторінкового шаблону з багаться однаковими блоками на них, верстальщик створює декілька основних файлів-сторінок, які повинні вхолдими до складу шалону. Наприклад:
index.html
single.html
category.html
Кожна сторінка може складатися із блоків-компонентів. Вони можуть одночасно присутніми на декількох сторінках. В вищенаведених файлах прописуеться назва компонентів таким чином:
<!--=include header.html -->
Тобто компонент має назву header.html, в ньому розміщений код, який повинен бути в шапці шаблону. Ці файли в любій кількості повинні розмішуватися в папці:
app/components
Другий варінт збірки полягає в тому, що весь код пишеться в файлі index.html, що розміщений в каталозі pages, і в нього не підключаються жодні компоненти.
Ви зберігаєте файли зображень в форматах svg, jpg, png. Їх Потрібно розмістити в каталозі:
app/img/src
В автоматичному режимі вони мінімізуться і переміщаться в каталог:
app/img
Крім того генеруються зображення в форматах webp та avif. Далі ви можете вставиляти зображення на сторінку за допомогою тега:
<img>
В цьому разі використовуються файли jpg та png. ніяка оптимізація сторінок не виконується. Щоб у браузера був вибір завантаження оптимального файла потрібно використовувати тег picture таким чином:
<picture>
<source type="image/avif" srcset="img/picture-name.avif">
<source type="image/webp" srcset="img/picture-name.webp">
<img src="img/picture-name.jpg" alt="picture alt" title="picture title">
</picture>
Якщо вам не надані web шрифти до проекту, загрузіть в каталог шрифти в форматі ttf або otf.
app/fonts/src
Виконайте одноразово команду
gulp fonts
Всі шрифти будуть складатися в каталог
app/fonts
Вони підключиться в файлі:
app/scss/_fonts.scss
Такий файл може вміщувати в себе багато елементів для декорування сторінок сайту, завантажуватися один раз и використовуватися одночасно в декількох місцях сторінки/сторінок.
Щоб створити спрайт потрібно всі файли в формати svg завантажити в каталог
app/img/sprite
Виконати команду
gulp sprite
В підсумку виконання процессу створення svg спрайту отримуемо
- сам файл svg, він має назву sprite.svg і він розміщується в каталозі app/img/
- каталог symbol в якому розміщений файл html, с інструкцією підключення спрайту в документ
- каталог symbol вміщає файл _sprite.scss, в якому зібрані стилі оформлення спрайту.
В терміналі виконайте команду
gulp build- 1920 - базова точка
- 1680 - додаткова точка
- 1440 - базова точка
- 1336 - базова точка
- 1280 - додаткова точка
- 1200 - базова точка
- 1190 - базова точка
- 1080 - базова точка
- 1024 - базова точка
- 992 - базова точка
- 980 - базова точка
- 834 - додаткова точка
- 812 - додаткова точка
- 815 - базова точка
- 800 - базова точка
- 768 - базова точка
- 740 - базова точка
- 736 - базова точка
- 734 - додаткова точка
- 684 - додаткова точка
- 667 - базова точка
- 640 - додаткова точка
- 600 - базова точка
- 568 - базова точка
- 480 - базова точка
- 425 - додаткова точка
- 414 - додаткова точка
- 412 - додаткова точка
- 387 - базова точка
- 384 - додаткова точка
- 375 - додаткова точка
- 360 - додаткова точка
- 320 - базова точка
За умовчуванням виконане налаштування котролю за якістью написанного коду в процессі роботи. До зборки додані такі інструменти:
- Eslint
- Prettier
- Stylelint
Для активації цих інструментів використовуйте IDE VSCode да встановіть такі плагіни:
- Prettier - Code formatter
- ESLint | Dirk Baeumer
- vscode-stylelint
