Как грамотно верстать несколько страниц веб-сайта?

Question

[Rasul]

Я в недопонимании по поводу верстки нескольких страниц.
Кто-то говорит, что нужен GULP, а кто-то вовсе говорит что GULP устарела и можно использовать Webpack,
а кто-то вовсе за то, что ничего из этого не нужно, и можно просто все сверстать в один HTML файл.
Сейчас, 2022 год, и я бы хотел услышать самую актуальную информации по поводу этого.
Буду благодарен за короткий и понятный ответ.

Answer 1

[Сергей delphinpro]

Берёте и верстаете как обычно.
Любые из озвученных инструментов актуальны. Выбирайте по душе.

Лично я предпочитаю верстку делать, используя mix. Потому что его практически не нужно конфигурировать. Сразу начинаешь работать. Плюс, есть куча готовых расширений https://laravel-mix.com/extensions

Примерный конфиг

const mix = require('laravel-mix');
require('laravel-mix-twig');

mix.setPublicPath('dist');
mix.browserSync({
    server      : {
      baseDir  : 'dist',
      directory: true,
    },
    files       : ['./dist'],
  });
}

mix.sass('src/scss/main.scss', 'css');

mix.js('src/js/main.js', 'js')
  .sourceMaps(true)
  .extract();

mix.alias({
  '@': path.join(__dirname, 'src'),
});

mix.twig({
  root    : './src/templates',
  entries : [
    '*.twig',
  ],
  output  : './',
});

package.json

{
  "private": true,
  "scripts": {
    "dev": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "mix --production"
  },
  "devDependencies": {
    "laravel-mix": "^6.0.43",
    "laravel-mix-twig": "^2.0.1"
  }
}

Answer 2

[wonderingpeanut]

Нужно не изобретать велосипед и использовать готовые решения: реакт/вью/ангуляр или любой другой из десятков библиотек/фреймворков для постройки пользовательского интерфейса.

Для реакта есть CRA, Next.js и Vite, в которых все настроено за тебя.
Для вью есть vue CLI, Nuxtjs и Vite, в которых опять же все настроено за тебя.
Для ангуляра наверняка есть что-то похожее.

Comments

[Сергей delphinpro]

Речь идет о верстке, а не о фронт-разработке.
Если нужно сделать фронт, то вы правы. Если нужно просто заверстать несколько страниц для "обчного" сайта, то реакты/вью здесь совсем не помогут.

[wonderingpeanut]

Сергей delphinpro,

Сейчас, 2022 год, и я бы хотел услышать самую актуальную информации по поводу этого.

Если нужно просто заверстать несколько страниц для "обчного" сайта, то реакты/вью здесь совсем не помогут

2022 год

пиши хтмл руками гыгыгы

[Сергей delphinpro]

wonderingpeanut, ну и что? в 22 году остались только SPA сайты?

Ещё раз повторю: в вопросе тег "Вёрстка". Речь идёт об обычной верстке обычного многостраничного сайта. Советовать везде и всюду использовать react/vue - это значит выдавать непонимание того, для чего они нужны.

[Антон Литвиненко]

вставлю свои 5 копеек. если разработчик не умеет верстать то будь он хоть гуру вью или реакта морда сайта сама по себе не появится. какой прок от логики, если нет верстки?

[wonderingpeanut]

Сергей delphinpro, реакт это не только СПА.

Ещё раз повторю: в вопросе тег "Вёрстка". Речь идёт об обычной верстке обычного многостраничного сайта

Что такое верстка в твоем понимании? В моем понимании это создание пользовательского интерфейса с использованием хтмл, ксс и джаваскрипта. Чем написание страницы в реакте или любой другой любой библиотеке не верстка?

Советовать везде и всюду использовать react/vue - это значит выдавать непонимание того, для чего они нужны

Просвяти меня, для чего они нужны? Ко-ко-ко СПА ко-ко-ко? Лол.
Человек спрашивает, что в 2022 году актуально. Имхо если тебе нужно сверстать больше одной страницы, в 2022 году для этого актуально использовать UI либы/фреймворки. Я бы и для лендоса какой-нибудь реакт или некст использовал, потому что во-1 это круто, модно и молодежно, во-2 удобно. в-3 можно будет этот кейс запихнуть в портфолио, чтобы на собеседовании можно было сказать дяде (или тете) интервьюеру "смотрите, это я сделал!"

Answer 3

[Никита Чернов]

Как вариант сайт можно собирать простым генератором статики вроде 11ty, а ассеты инстументами на свой вкус: gulp, parcel, webpack или чем угодно ещё.