Oct 5 2012 at 00:09

Tincr — быстрая правка css и js

Invite pending

Tincr — расширение для Chrome, позволяющее при редактировании CSS (js) в панели Developer Tools, сохранять изменения в исходных файлах. Эдакое избавление ctrl+c -> alt+tab -> ctrl+v

Установка

Установить можно либо из bitbucket.org/ryanackley/tincr либо из Chrome WebStore
В первом случае для установки нужно будет включать developer mode, во втором все происходит проще.

После установки в панели Developer Tools появится новая вкладка Tincr, на которой нужно будет произвести первоначальную настройку расширения, точнее — показать место, где лежат css и js файлы проекта. Либо выбрать что-то из уже имеющегося в наборе, например для варианта «Ruby on Rails» стили будут подбираться из /app/assets/stylesheets, скрипты из /app/assets/javascripts.

Также есть заготовки «Chrome Extension», «HTTP Web Server», «Attlassian Plugin» и «Configuration File».
Последний вариант для тех, чья структура проекта не похожа на варианты выше.
Файл конфигурации представляет из себя список регулярок, должен называться «Tincr.json» и находиться в корне проекта.

Допустим, у вас имеется следующая структура каталогов:

+ app/
— js/
— css/
— ***/
+ ***/
И при этом вы обращаетесь к ним без указания каталога «app», т.е. /js/jquery.js

В этом случае файл должен выглядеть так:

               {
		    "toFile" : [
		        {"from": "/(.+\\.js)",
		         "to": "/app/js/$1"},
		        {"from": "/(.+\\.css)",
		         "to": "/app/css$1"}
		    ],
		    "fromFile" : [
		        {"from": "(\\\\|/)app\\1(?:js|css)
				\\1(.+(\\.js|\\.css))(\\.[a-zA-Z]+)?$",
		         "to": "/$2?body=1"}
		    ]
		}

Секция «toFile» используется для указания путей к файлам, в которые сохранять изменения,
«fromFile» — для обновления информации на странице без ее перезагрузки.

Использование

Просто редактируем все что нужно в панели Developer Tools — все внесенные изменения тут же оказываются в исходных файлах.

Вывод

Интересное дополнение, в итоге немного выгоднее использования вкладки «source» или же переноса кода из developer tools в файл руками.

Tags:

Hubs:

Lumber room