Что дальше делать с нативными файлами HTML и CSS?

Question

[Илья Пирожок]

Долгое время практикуюсь верстать, получается хорошо и даже делал работу на заказ. И тут у меня возник вопрос а что обычно делают с нативными\стоковыми файлами html и css, если есть несколько файлов css, как их объединить в один? В общем какие действия совершаются для минимизации загрузки страницы? Чем сжимают файлы, какие файлы нужно сжимать? Где это все делать? Что бы в итоге получился укомплектованный набор готовой страницы. Я думаю те кто в теме фронтэнда поймут меня

Answer 1

[Serj-One]

css обычно клею в 2 файла. Это общий файл стилей подключаемых модулей, и файл собственных стилей. То же самое с js. То и другое минифицирую. Для оптимизации скорости загрузки желательно оптимизировать изображения.
Делать всё это (и многое другое) автоматически вам поможет gulp
Ознакомиться с основами можно например здесь
Также советую изучить препроцессоры.

Comments

[Илья Пирожок]

Спасибо! А что за файл с подключаемыми модулями? Поясните, я просто немного не понял

[Дмитрий Королёв]

>клею в 2 файла
Почему не в один?

Answer 2

[Денис Инешин]

Вам нужна система сборки. Начните с этого туториала по Grunt.
Вам нужен CSS-препроцессор. Посмотрите на LESS

Comments

[Serj-One]

Поддержу ответ, но всё же предложу Gulp + SCSS.

[Alexander Sigmanor]

Тоже посоветую с gulp начать.

[Дмитрий Королёв]

В 2015 (ой, уже 2016) году нет никаких причин использовать Грант. Галп умеет всё то же + он проще в обучении и работает гораздо быстрей.

[Денис Инешин]

Дмитрий Королёв: не нужно вот этих выдумок) грант по прежнему очень хорош. А про то что Gulp проще в обучении, это не правда. Для новичка проще будет то, где мануал лучше.

[Дмитрий Королёв]

Денис Инешин: каких еще выдумок? О_о И что же я выдумал? Что галп быстрее гранта? Ну погуглите "grunt vs gulp speed". Или что он не менее функционален? Ну так скажите мне, что такого умеет грант, чего не умеет галп?
Сложность обучения измеряется мануалом? Вот это, извиняюсь за выражение, лол.

[Денис Инешин]

Дмитрий Королёв: выдумки это "нет причин пользоваться грунт". Да в некоторых вещах галп быстрее да, но это практически заметно только на очень крупных проектах. В остальном вполне себе равнозначные инструменты-конкуренты.

[Дмитрий Королёв]

Денис Инешин: >нет причин пользоваться грунт
Ок, есть одна причина - привычка. Назовёте другую? Хоть одну? Хоть в чём-то он превосходит Gulp?

[Дмитрий Королёв]

Ну да, кроме количества плагинов, разумеется. Мы ведь на ноде, здесь этим бессмысленно мериться.

[Денис Инешин]

Дмитрий Королёв: ни в чем не превосходит, более привычный синтаксис + четкая последовательность выполнения инструкций против не всегда понятного распараллеливания в гульпе. Почему бы нет? Я не имею ничего против гульпа, но я считаю что это уж совсем преждевременно хоронить грунт.

[Дмитрий Королёв]

Денис Инешин: >не всегда понятного распараллеливания
Я нашел для Вас персональный жирный плюс в Галпе - шикарную возможность разобраться в синхронности JS.

[Денис Инешин]

Дмитрий Королёв: да да, спасибо, но не за себя же волнуюсь)

[Дмитрий Королёв]

Денис Инешин: а не нужно. Галп, повторюсь, проще в изучении и старте, чем Грант. Это подтверждает не только мой опыт, но и многих других.

[Денис Инешин]

Дмитрий Королёв: ну ок, будь по вашему.

[Дмитрий Королёв]

Денис Инешин: это не по-моему.

Answer 3

[VZVZ]

> Что бы в итоге получился укомплектованный набор готовой страницы.
Это обеспечивают серверные фреймворки, например, Yii2 (фреймворк для PHP, один из лучших). Ну и CMS тем более это умеют.
MVC-фреймворк каждую страницу (View) автоматически оборачивает в шаблон (в Yii2 это Layout), т.е. в заголовку полной страницы, куда входят стили, скрипты (такие, как jQuery), хедер, футер и прочее общее для всех страниц. Ну а не общее - просто прописывается в каждом View.

Comments

[Serj-One]

То, что автор спрашивает про фронтенд, вас не смущает?

[VZVZ]

Serj-One: А с какой стати это должно меня смущать?
Если вы имеете в виду, что автор работает в команде, где он занимается только фронт-ендом - так серверные фреймворки, в принципе, допускают такое.
Пусть он редактирует только View и Layout, и в них редактирует только HTML+CSS+JS, а то что внутри <?php ?> - обходит стороной.
А если он indie, то на одном лишь фронт-енде он по-любому далеко не уедет. Да и вообще, хоть немного уметь бэк-енд в любом случае надо - как вы реализуете скажем AJAX без умений в бек-енде?

[Serj-One]

VZVZ: Если, если... Человек задал конкретный вопрос только по фронтенду. Ваш ответ в контексте вопроса неуместен.

Answer 4

[trushka]

Вот недавно как раз была статья на Хабре