Вопрос или проблема
Существуют ли продукты, которые позволяют мне редактировать CSS на сайте так же, как я это делаю в инструментах разработчика Firefox/Chrome/Safari, но с возможностью сохранить результат в репозиторий git, содержащий исходный код редактируемого сайта?
Опыт работы с инструментами разработчика, о котором я говорю, выглядит так (это Firefox, но я открыт для любого браузера):
Я знаю, что редактируемый CSS в браузере может не соответствовать точно ни одному файлу в репозитории git, поскольку CSS может быть минифицирован, преобразован и т.д., но предположим, что в моем репозитории git действительно содержится точный CSS-код, который отображается в браузере. Есть ли способ “сохранить” эти правки?
Обратите внимание, что я хочу избежать решений, когда я экспортирую всю страницу или весь сайт из браузера после редактирования CSS, потому что мой HTML генерируется из шаблона, и в конечном итоге я хочу внести относительно небольшое количество изменений (обычно 2-3 строки правок CSS из сотен строк общего кода CSS на моем сайте) в запрос на извлечение в git.
Также мне не нужно решение, где я добавляю пользовательский CSS или JavaScript на сторонний сайт. Я редактирую свой собственный сайт и хочу вернуть изменения в исходный код моего сайта, который в конечном итоге увидят все посетители.
Ответ или решение
Конечно! Существует несколько методов и инструментов, которые могут помочь вам редактировать CSS на вашем сайте в браузере, а затем сохранять изменения в git-репозиторий. Вот несколько подходов, которые вы можете рассмотреть:
1. Использование инструментов разработчика в сочетании с расширением для git
Одним из простых способов является использование встроенных инструментов разработчика в браузере (как в Firefox или Chrome) для редактирования CSS в реальном времени, а затем параллельная работа с git. Например, вы можете использовать следующее:
-
Редактирование CSS: Откройте инструменты разработчика (обычно это делается нажатием клавиши F12 или правым кликом -> «Просмотреть код»). Перейдите на вкладку «Elements» и найдите нужный элемент. В правой части панели вы сможете редактировать CSS в разделе «Styles».
-
Сохранение изменений: После внесения изменений вы можете вручную перенести изменения в ваш CSS файл. Это можно сделать, если вы будете следить за изменениями непосредственно в инструментах разработчика. Как только вы определили, какие изменения хотите сохранить (например, 2-3 строки), вы просто добавляете их в соответствующий файл вашей локальной копии репозитория.
-
Использование git: После внесения изменений в файл CSS, вы можете переходить в командную строку, где находится ваш git-репозиторий, и выполнять команды
git add,git commit -m "Ваше сообщение"иgit pushдля отправки изменений в удалённый репозиторий.
2. Инструменты для редактирования и сохранения в git
Существуют также некоторые инструменты и рабочие процессы, которые могут упрощать данный процесс:
-
BrowserSync: Это инструмент, который позволяет вам синхронизировать изменения в реальном времени. С ним вы можете разработать пользовательское CSS, и каждый раз, когда вы вносите изменения, они будут автоматически обновляться в браузере, а затем вы можете сохранить изменения в git.
-
LiveReload: Этот инструмент похож на BrowserSync и позволяет обновлять страницу в браузере автоматически, когда вы вносите изменения в свои файлы. Вы можете использовать это в комбинации с git.
3. Настройка Workbench для совместного использования с git
Если вы хотите автоматизировать процесс, вы можете создавать скрипты или настроить рабочее окружение:
-
Создание пользовательской программы: Если у вас есть опыт программирования, вы можете создать небольшое приложение, которое записывает изменения в CSS в файл, который синхронизирован с вашим git-репозиторием. Это может быть сделано с использованием JavaScript и таких библиотек, как jQuery или непосредственно через API браузера.
-
Настройка гита для отслеживания изменений в реальном времени: Вы можете использовать hooks в git для автоматического регистрации изменений в вашем репозитории. Например, при каждом
git commitвы можете настроить скрипт для передачи данных в ваш CSS.
Заключение
Каждый из описанных методов имеет свои преимущества, и выбор подхода будет зависеть от вашего рабочего процесса и удобства. Используя инструменты разработчика и сочетая их с git, вы сможете эффективно вносить и сохранять изменения в вашем CSS-коде, минимизируя при этом ручную работу. Убедитесь, что вы регулярно синхронизируете ваши изменения и создаёте коммиты, чтобы избежать потери данных и облегчить процесс отслеживания изменений.