Как я сделал свою сборку Gulp для быстрой, лёгкой и приятной вёрстки

[FSA]

Я тянул за собой sass только по причине использовать bootstrap. Вот только в 5 версии он перешёл на Dart SASS (пакет gulp-dart-sass). А если bootstrap нет в проекте, то оказалось, что мне проще использовать postcss. За одно ругани в консоли нет, что куча компонентов небезопасных через npm скачивается.

[budfy]

Спасибо, посмотрю на вариант с postCss. Интересно.

[Uolary]

А имеет ли смысл сейчас использовать Gulp, если есть Webpack?

[budfy]

Это разные инструменты. Webpack — сборщик JS-проектов. Gulp — автоматизатор для вёрстки. Да, webpack тоже умеет работать с html, но это другой инструмент, предназначенный для других целей.

[DreamShaded]

автор прав про инструменты, но я себе собрал таки на вебпаке)) против галпа ничего не имею, но если бандлер позволяет делать всё, то зачем тянуть таск раннер? Разбил конфиг просто на модули и всё. Дока сейчас у вебпака шикарная, конфиг накинул за несколько вечеров, и то больше потратил не на настройку, а на «хмм, докину-ка вот такой плагин, выглядит полезным! А ещё какие есть?»

[budfy]

Я и в сторону вебпака хочу посмотреть, но за работой никак руки не дойдут его покрутить. Возможно, сделаю ещё и сборку на вебпаке.

[DreamShaded]

Попробуйте Parcel, всю мелочь делаю на нём теперь. Конфиг в большинстве случаев не нужен, бандлер сам тянет нужное

[LostAlly]

Возможно глупый вопрос, но я задам - правильно ли я понял, что этот подход можно использовать для сборки статических сайтов?

[budfy]

Да, можно.
Собственно, для них и для вёрстки под последующую натяжку эта сборка и собиралась.

[notiv-nt]

Глянул мельком, и всегда обращаю внимание на сборку js, потому что это самый показательный таск и могу сказать что .pipe(concat('libs.min.js')) это привет из 19 века. Да, поначалу, когда нужно всего-лишь найти элемент и повесить на него класс это кажется хорошей идеей, но на что-то большее эта конструкция не тянет, так что советую воспользоваться вашим же советом «Webpack — сборщик JS-проектов. Gulp — автоматизатор для вёрстки» и поставить webpack/rollup рядом, либо в gulp либо запускать их параллельно.
Ибо src/js/01_main.js это великолепно.

+ Я бы как «entrypoint» делал идею страниц + common.[js/css] для всех
src/html/pages/[name].html,
src/scss/pages/[name].scss,
src/js/pages/[name].js


Если много страниц, то ничего лишнего не будет грузиться.

[budfy]

Спасибо, надо будет проработать этот момент.

[Ambi2Rush]

Хорошая сборка. Что-то похожее я и искал. Может еще smartgrid.js туда добавить?

[budfy]

Лично я не использую и на полную юзаю гриды в своих проектах. Поэтому ставить по умолчанию smartgrid не вижу смысла. Но если кто-то в прод использует толдько флексы — почему нет?

[hellpirat]

Для верстки чаще всего вот это беру — github.com/yeoman/generator-webapp
Практически все уже нужное есть, и есть много готовых рецептов если вдруг что-то не хватает.

А так по описанию Ваша сборка выглядит тоже интересной