Как реализовать css live reload?

Question

[sumyuga]

Необходимо реализовать изменение css-свойств на клиенте в браузере, что-то вроде live css. Но реализация на клиентском JS видимо не подходит, так как на выходе мне нужен отдельный css-файл со всеми изменениями. Нужна веб страница с инпутами и значениями, где я могу менять эти переменные значения для изменения тех или других css-свойств, изменения стилей на клиенте происходят одновременно, а после внесения всех изменений нажать на кнопочку и получить целиком весь файл со стилями. Как кошернее это реализовать, какие есть технологии? Первое что приходит на ум - node.js, но как реализовать live reload? Я в этом плохо разбираюсь, поэтому и обращаюсь к общественности за помощью. Направьте на путь истинный, буду премного благодарен.

Comments

[Юрий Лобанов]

Добавьте теги js, jq, node или другие, иначе вопрос не все увидят. К css вопрос отношения можно сказать вообще не имеет.

Answer 1

[Роберт Харитонов]

Если редактор стилей на другой страннице, то можно сделать постоянное соеденение через сокеты (например с http://socket.io) между редактором и целевой странницей. После изменений в редакторе, будет лететь событие по замене стилей. Сохранить сам файл можно и правда через nodejs, так и же событие по сокетам можно через ноду так же посылать на итоговую страницу.

С нодой еще можно просто заиспользовать http://www.browsersync.io, который будет следить за измененным файлом, который будет сохранять сам сервер ноды.

Comments

[sumyuga]

на одной странице планируется сам html-шаблон, здесь же инпуты с переменными и здесь же изменения налету, в общем эдакий вебфлоу, ну и с возможностью потом с этой же страницы сабмитом получить файл со стилями

[Роберт Харитонов]

Если все на одной страннице, то можно просто стили по изменению инджекстить в

[sumyuga]

просто, но видимо не для меня. в смысле я не совсем понял как это сделать

[Роберт Харитонов]

Из JS заполнить style элемент на страннице.

[sumyuga]

мне нужен отдельный сгенерированный css-файл по запросу, встроенные стили не подходят

[Роберт Харитонов]

Встроенные стили только для live reload, а отдельный файл можно получить отослав текущий результат на сервер, и получив файл на скачивание в ответ.

[sumyuga]

в том и вопрос. я не знаю как это сделать, какими средствами отослать запрос и получить в ответ сгенерированный css-файл. потому и спрашивал про ноду

[Роберт Харитонов]

В вопросы было указано, что не понятно именно с live reload :) Если с нодой, то берете nodejs, березе модуль express, далее готовите лисенер на url:

app.get('/transform-to-file', functuon(req,res) {
тут в req обрабатываете параметры, и в res записываем итоговый ответ в виде файла на скачивание
});

[sumyuga]

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

[Роберт Харитонов]

Да без проблем можно реализовать подобное, особенно если только одну версию стилей нужно иметь. Оправляете конфиг на ноду, там компилите стилус в том же обработчике, присылаете ответ в виде готовых стилей для инжекта в style.

[sumyuga]

и последнее, где бы почитать/подсмотреть подобные решения? я с нодой недавно начал знакомство

[Александр Таратин]

@Operatino Зачем вообще что-то на сервер слать? для браузеров не поддерживающих api работы с файлами можно использовать решение через flash