Transcription
Всем привет, и добро пожаловать в третью часть нашего учебника по созданию портфолио-сайта на HTML и CSS. Если вы еще не видели предыдущие части, ссылки находятся в описании. Обязательно ознакомьтесь с ними, прежде чем продолжить. В этом видео мы рассмотрим настройку Git и npm, структуру папок, настройки рабочей области, конфигурацию DPrint, установку и использование зависимостей, скрипт для оптимизации и автоматизацию сборки. Прежде всего, давайте откроем новую папку для нашего проекта. Вы можете сделать это, перейдя в "Файл", "Открыть папку" или просто нажав Ctrl+K, затем O. Теперь вы можете использовать такие инструменты, как GitHub Copilot, для создания файлов и написания кода с помощью подсказок. Но поскольку я хочу провести вас через все с нуля, я сделаю это вручную. Далее, давайте настроим Git и npm. Вы можете инициализировать репозиторий Git, используя встроенные инструменты VS Code или через терминал. Но поскольку вы уже инициализировали его, вы должны увидеть папку git в вашем каталоге. Чтобы инициализировать npm, у вас есть два варианта. Первый — запустить npm init -y, чтобы пропустить все вопросы настройки. А второй — просто запустить npm init и ввести желаемые значения. После этого файл package.json будет создан автоматически, и вы увидите его в разделе "Изменения git". Теперь давайте сделаем наш первый коммит в локальный репозиторий. На следующем шаге давайте создадим все необходимые файлы и папки для структуры нашего проекта. Мы начнем с файла .gitignore. Это говорит Git, какие файлы или папки игнорировать. Например, создайте файл с именем test.css и добавьте его в .gitignore. Теперь вы увидите, что он станет серым. Это означает, что Git больше не отслеживает его. Мы также добавим node_modules и файл package-lock.json в .gitignore. Они будут автоматически сгенерированы, когда кто-то клонирует ваш проект и запустит npm install. Теперь давайте создадим наши основные файлы. Сначала создайте index.html, который является точкой входа нашего сайта. Затем создайте папку src, где будет находиться весь наш исходный код. Внутри src создайте эти папки: assets, components и pages. В папке components мы будем хранить многоразовые части нашего сайта. В папке pages мы создадим отдельные разделы, не фактические автономные страницы, а модульные разделы нашего сайта. Внутри assets давайте организуем ее дальше, создав папки CSS, fonts, icons, images и scripts. Далее я собираюсь создать новый файл рабочей области для этого проекта. Вот небольшой трюк. Перейдите в настройки рабочей области, измените любое значение и нажмите Enter. Это автоматически создаст файл рабочей области для вас. Если вы не знакомы с рабочими областями, посмотрите мое видео, ссылка на которое есть в описании. Теперь я добавлю сюда все соответствующие настройки и объясню их. Наши настройки рабочей области включают все из предыдущего видео, за исключением пары новых. Эти две новые настройки настраивают DPrint как наш стандартный форматтер кода. Настройки DPrint, которые помогают быстро расширять HTML и CSS. Опять же, посмотрите видео про DPrint, если вы новичок в нем. Две настройки — это конфигурация Highlight, которая очень проста. Просто следуйте документации расширения. И, наконец, HTMLHint, который мы уже рассматривали в прошлом видео. Теперь давайте настроим DPrint, наш форматтер кода. Мы настроим его так, чтобы он форматировал наш HTML и CSS именно так, как нам нравится. Мы можем устанавливать npm-пакеты двумя способами. Как зависимость, если это часть кода вашего фактического проекта, или как dev-зависимость, если это только для использования в разработке. Поскольку мы используем DPrint только для форматирования нашего кода, это dev-зависимость. Вы можете установить его либо с длинным параметром --save-dev, либо с коротким параметром -D. Я не буду углубляться в настройку DPrint здесь, потому что у меня есть полное видео об этом, ссылка в описании. Теперь, чтобы увидеть, работает ли это или нет, создайте HTML-шаблон с помощью DPrint. Отформатируйте файл, и вы увидите, как DPrint творит свое волшебство. После этого давайте установим все зависимости нашего проекта и dev-зависимости. Наши dev-зависимости включают PurgeCSS для удаления неиспользуемых CSS для уменьшения размера файла. Autoprefixer для добавления вендорных префиксов для поддержки кроссбраузерности. CSSnano для минификации CSS для уменьшения размера файлов. HTMLHint для проверки HTML на наличие проблем. PostCSS для преобразования CSS с помощью плагинов. Sharp для оптимизации изображений. AStyle для подключения CSS даже внутри HTML-файлов и SVGO, как следует из названия, для оптимизации SVG-файлов. А наши основные зависимости включают Font Awesome, которая является отличной бесплатной библиотекой иконок, Animate.CSS, которая представляет собой готовые CSS-анимации, AOS, что означает Animate on Scroll, Modern Normalize или Normalize.CSS, которые являются сбросами CSS, и вы можете установить любой из них по своему выбору. Далее давайте создадим глобальный CSS-файл. Здесь мы будем использовать CSS-слои, такие как reset, global, container и section, для более легкого управления специфичностью. Теперь вот что важно. При развертывании вашего сайта на GitHub вы не можете напрямую ссылаться на ресурсы из папки node_modules, потому что GitHub не будет устанавливать зависимости для вас. Поэтому, вместо того чтобы вручную копировать ресурсы из node_modules, что считается плохой практикой, мы напишем простой скрипт для автоматического выполнения этой задачи. И мы сделаем то же самое для наших JS-ресурсов. Позже мы объединим все в наш окончательный скрипт сборки. После этого просто импортируйте эти недавно скопированные ресурсы. Затем подключите таблицу стилей внутри HTML-файла и убедитесь, что все работает нормально. Теперь давайте посмотрим, как использовать иконки Font Awesome в нашем проекте. Есть много способов сделать это. Проверьте документацию для получения подробной информации, но здесь мы просто скопируем и вставим нужные нам иконки. Далее, давайте оптимизируем наши иконки. Мы напишем небольшой JS-скрипт, который сжимает изображения из входной папки и сохраняет их в выходной папке. Этот скрипт использует Sharp и SVGO для сжатия. Мы также создадим файл конфигурации SVGO для настройки оптимизации. Поскольку операторы import работают только внутри модулей, мы переключим наш пакет с CommonJS на режим ES-модуля. Затем, когда мы запустим скрипт, вы увидите, как размер ваших иконок уменьшится. Наконец, мы добавим этот скрипт в наш конвейер сборки. Вы можете выполнить тот же процесс и для изображений. Просто отметьте их размер до и после, чтобы увидеть улучшение. Хей, хей, хей. Теперь давайте поговорим о стилизации. Очень полезный инструмент для отладки CSS. Ему нужен файл .stylelintrc.json для конфигурации. Вы можете взять шаблон из официальной документации. Мы можем написать скрипт, который автоматически подключает все CSS-файлы внутри наших папок, даже внутри HTML. Вы можете использовать опцию fix для автоматического исправления проблем, но я лично не рекомендую ее. Иногда она может испортить ваш код. Далее PostCSS. Чтобы оптимизировать ваш CSS, создайте конфигурацию PostCSS и импортируйте нужные вам плагины. Здесь мы будем использовать CSSnano и Autoprefixer. Мы не будем включать PurgeCSS здесь, так как он лучше работает как отдельный скрипт. Теперь давайте напишем пользовательский скрипт для сборки всех CSS-файлов в папку dist. Запустите его, и вы увидите минифицированный CSS с добавленными префиксами, готовый к использованию. Не забудьте добавить это и в ваш окончательный скрипт сборки. Далее, давайте используем PurgeCSS для удаления неиспользуемых классов. Например, с Animate.CSS, мы не нуждаемся во всех классах анимации. Нам нужно только несколько из них. С помощью PurgeCSS мы можем указать, какие классы сохранить. Просто имейте в виду, что это работает только для статических CSS-классов, а не для динамически генерируемых, как в библиотеке Animate on Scroll. Попробуйте и сравните размеры файлов до и после очистки. Затем добавьте этот шаг очистки в конец вашего процесса сборки. Теперь давайте закоммитим наши изменения и закончим настройку проекта. В следующих видео мы начнем шаг за шагом создавать наш портфолио-сайт. Поэтому обязательно подпишитесь, нажмите на колокольчик, и если вам понравилось это видео, поставьте лайк. Это действительно помогает каналу. Спасибо за просмотр и отличного вам дня.