Чем собирают такие проекты?

Question

[Belle_Delphine]

Хай. Часто вижу на сайтиках, что в названиях JS / CSS файлах есть такое:
/js/main.fdsag234234.js
/css/style.fafgasg234214234.css

Вот пример:


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

Answer 1

[Darhild]

Попробуйте Parcel, имхо, хорошо подходит для небольших проектов. Минимум настроек, ничего не нужно подключать дополнительно. Эти идентификаторы для css и js при production-сборке, насколько помню, присваиваются по умолчанию.

Answer 2

[Дуболом Одноклеточный]

Я знаю что в Webpack точно такое есть, а вот с другими бандлерами не факт.
У Webpack есть переменная [cash] насколько я помню и вот она дает такой идентификатор файлам (не автоматически)

Comments

[Belle_Delphine]

Насколько я знаю, Webpack - это сборщик для JS. Но я стараюсь все бацать на чистом CSS (на фреймворке, если быть точнее). Разве мне подойдет Webpack?

[Дуболом Одноклеточный]

Belle_Delphine, да, он может трогать css и даже картинки, только с условием что ты будешь импортировать css в js файлы, но суть не изменится и он соберет все в отдельном .css файле
И еще лучше учить и использовать js)

Он тебе сожмет css файл, особенно если подключишь PostCSS как плагин (получишь доп плюшки для сжатия и оптимизации)

[Pavel Shvedov]

Belle_Delphine, вебпак штука расширяемая, и оно умеет бандлить всякое с помощью плагинов

[Belle_Delphine]

Дуболом Одноклеточный, я его знаю, но все таки стараюсь не юзать. Например: делаю обычный статический лендинг, понятное дело, что там JS совсем и не нужен, будет лишняя нагрузка. Но как раз его хочется красиво упаковать чем-то. Вот и весь вопрос =)

[Дуболом Одноклеточный]

Belle_Delphine, Понятно в чем дело)
Ну да, согласен, но тогда вообще css файлы можно и без этого идентификатора, если сайт простой и не будет часто обновляться например. Так можешь юзать чисто PostCSS для сжатия, но не для наименования
Возможно есть пакет, поищу сейчас)

[Belle_Delphine]

Дуболом Одноклеточный, сейчас я разрабатываю сайтики на Bootstrap / UIKit, а потом сжимаю их через https://purifycss.online/ , довольно очень мощная штука и без косяков удаляет ненужные CSS-классы. Но, всегда же хочется совершенствоваться)

Еще такой вопрос (у меня лимит на создание отдельных вопросов) - может, Вы знаете какие-либо обфускаторы html-классов? Знаю (!), что это не поможет при копировании сайта, но мне требуется просто скрыть оригинальные классы (например, чтобы в итоге были классы "grid-fsa2343", "header-fdbcxb" и т.д.).
В тырнетах годного ничего нет, все кривые (в Bootstrap и UIKit классы еще юзаются и в JS, многие обфускаторы их не видят вообще)

[Дуболом Одноклеточный]

Нашел вроде css-bundler: https://github.com/anthonyshort/css-bundler
PostCSS еще кстати media-запросы не нужные убирает...
Ну html обфускаторов не знаю, это в целом не очень простая вещь, он должен заменять селекторы в css на те которые сам сгенерил, вряд ли такое есть

[Aetae]

Belle_Delphine, обфускатор классов что используются также в javascript, как общая задача - штука принципиально невозможная. Потому что javascript может назначать имена классов любым, самым сложным и не очевидным способом.
Есть технология css modules, но это, скорее всего, не то что вы ищите.