Вопрос или проблема
Существует ли какой-либо продукт, который мог бы дать мне возможность редактировать CSS на веб-сайте так же, как я это делаю в инструментах разработчика Firefox/Chrome/Safari, но с возможностью сохранить результат в репозиторий git, содержащий исходный код редактируемого сайта?
Опыт использования инструментов разработчика, о котором я говорю, выглядит так (с Firefox, но я открыт к любому браузеру):
Я понимаю, что CSS, который я редактирую в браузере, может не соответствовать точно какому-либо файлу в репозитории git, поскольку CSS может быть минифицирован, преобразован и т. д., но предположим, что мой репозиторий git действительно содержит точный CSS-код, который отображается в браузере. Есть ли способ “сохранить” эти изменения?
Обратите внимание, что я хочу избежать решений, при которых я экспортирую всю страницу или весь сайт из своего браузера после редактирования CSS, потому что мой HTML генерируется из шаблона, и в конечном итоге я хочу включить относительно небольшое количество изменений (обычно это 2-3 строки редактирования CSS из сотен общих строк CSS-кода на моем сайте) в запрос на слияние git.
Я также не ищу решение, при котором я добавляю пользовательский CSS или JavaScript на сторонний веб-сайт. Я редактирую свой собственный сайт и хочу включить изменения обратно в исходный код моего сайта, который в конечном итоге увидят все посетители.
Ответ или решение
На данный момент существует несколько решений, которые могут удовлетворить ваше требование по редактированию CSS в браузере с последующим сохранением изменений в репозиторий Git. Ниже я предложу несколько подходов, которые могут помочь в вашей задаче.
1. Использование Инструментов Разработчика с Расширениями
Как вы правильно отметили, встроенные инструменты разработчика в браузерах (например, Chrome DevTools или Firefox DevTools) позволяют вам вносить изменения в CSS. Однако для сохранения этих изменений в git-репозиторий, вам потребуется дополнительная автоматизация. Один из способов реализации этого — использование расширений для браузера.
Примерные шаги:
- Установите расширение: Найдите расширение для управления CSS (например, "CSS Peeper" или "Style Editor" для Firefox), которое позволяет вам сохранить изменения.
- Внесите изменения в CSS через инструменты разработчика.
- Экспортируйте изменения через расширение в файл.
- Скопируйте изменения в соответствующий файл в вашем проекте и зафиксируйте эти изменения в Git.
2. Локальная Разработка с Live Reload
Можно также рассмотреть вариант локальной разработки с использованием инструмента, который поддерживает live-reload или hot-reloading, таких как Webpack или Gulp, в связке с вашим проектом:
Шаги:
- Настройка локального окружения: Убедитесь, что ваш проект настроен для локальной разработки с использованием какого-либо сборщика (например, Webpack).
- Используйте dev-сервер для разработки: Это позволит вам видеть изменения в реальном времени.
- Редактируйте CSS прямо в редакторе: Вместо того чтобы вносить изменения в инструментах разработчика, редактируйте файлы CSS в редакторе кода (например, VS Code).
- Сохраняйте изменения: После редактирования просто сохраняйте файл, и изменения автоматически применяются, благодаря live-reload.
- Фиксация изменений в Git: После завершения редактирования сделайте коммит и создайте pull request.
3. Использование Систем Контроля Версий на Уровне Браузера
Некоторые инструменты, такие как GIT in the Browser, могут помочь вам интегрировать Git непосредственно в браузер. Хотя они не являются стандартным решением для редактирования CSS напрямую, вы можете использовать их как дополнительный инструмент для управления версиями ваших файлов.
Заключение
Нет идеального решения для автоматического сохранения изменений CSS напрямую из DevTools в Git, но с использованием комбинации инструментов и подходов, описанных выше, вы сможете создать эффективный рабочий процесс. Это сэкономит ваше время и упростит интеграцию изменений в репозиторий Git без необходимости экспортировать или копировать целые проекты. Организовав вашу работу таким образом, вы сможете сосредоточиться на внесении небольших, но важных изменений в ваш CSS.