Здравствуйте, дорогие друзья!
В один чудесный день в один чудесный час возникла острейшая необходимость в JS|HTML препроцессоре и как обычно поиск готового решения не увенчался успехом, везде чего-то не хватало (не было глобальных переменных, вставки строк, замены строк, импорта и т.п.). Ну и поскольку я суровый якутский парень, то выход был один — сделать все самому. Ну? что ж, результат моего труда я решил выложить на мнение комьюнити.
Введение
Препроцессор предназначен для js(json) и html(xhtml) файлов, эти файлы должны быть с соответствующими расширениями. Препроцессор поддерживает следующий ряд функций:Вставка по условию и без (поддерживается многострочность)
Замена строкистрокподстрок по условию и без (поддерживается замена части строки/строк (да одна управляющая конструкция может заменять части сразу в наборе строк), которая удовлетворяет регулярному выражению)
Поддерживаются глобальные переменные (определяются в отдельном файле) и локальные переменные, определяемые внутри файла (имеют больший приоритет)
Импорт файла по условию и без, при этом css файлы, при соответствующей настройке в управляющей конструкции, обрамляются тэгом style
Для вставки управляющих конструкций используются комментарии, по-этому они не мешают работе кода до обработки препроцессором.
Способ запуска
Препроцессор представляет из себя обычный groovy скрипт, которому необходим один обязательный аргумент:project.sourceDir — путь к начальному каталогу, в котором будет происходить замена.
а также можно указать два необязательныхproject.confFile — путь к файлу с глобальным конфигом.project.excludeDir — перечисленные через запятую имена папок, в которых не нужно осуществлять замену (тут, сразу скажу, что это имя папки самого нижнего уровня, путь к этой папке не учитывается, да минус, да постараюсь доработать).
Для запуска по мимо стандартных средств можно использовать и maven.
Операции
Внимание атрибуты в операциях должны следовать в строгом порядке (порядок будет описан напротив команды ниже), но необязательные атрибуты (pattern, if, type) можно не использовать, ниже я помечу их ?. В любой операции, кроме define, последним атрибутом может быть if=^condition^, где condition — условие, если оно записано в формате key=value, то операция выполнится если значение глобальной или локальной переменной с именем key совпадает с value, в другом случае операция выполнится, если существует глобальная или локальная переменная с именем condition.
Далее я приведу полный набор операций и их использование в примерах, я не буду приводить примеры с if так как, как его использовать я описал выше.
Открывающая и закрывающая управляющие конструкции должны быть на разных строчках, вставляемый/заменяемый текст должен быть между ними!
Вставка (insert ?if)
Примеры использования:
html
<!--insert
/insert-->
js
/*insert
var mode = 'dev'
/insert*/
Замена (replace to ?pattern ?if)
to — строка, на которую будет произведена замена (поддерживает плэйсхолдеры)pattern — шаблон для замены подстроки
Примеры
html
<!--replace to=^^-->
Заменит все, что находится между управляющими комментариями, на значение атрибута to.
Заменит все подстроки совпадающие с значением атрибута pattern на значение атрибута to в каждой строчке между комментариями.
js
window.appVersion = /*replace to=^${project.version}^*/0.6/*replace*/;
Заменит строку между управляющими комментариями на значение атрибута to.
/*replace to=^dojo^ pattern=^dijit^*/
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.TextBox");
/*/replace*/
Заменит все подстроки совпадающие с значением атрибута pattern на значение атрибута to в каждой строчке между комментариями.
Импорт файлов (import file ?type ?if)
file — путь к файлу, лучше всего писать абсолютный (поддерживает плэйсхолдеры)type — тип файла, от этого зависит дополнительная обработка файла (на данный момент поддерживается тип css, при этом содержимое файла упаковывается в одну строку и обрамляется тегом style
Примеры
html
js
//import file=^path^ type=^css^
Локальные переменные (define key=value|key)
Инициализация локальной переменной (область ее видимости текущий файл). Если указан только ключ, то будет создана, пустая переменная.key — имя переменнойvalue — значение
Примеры
html
js
//define debug=true
//define env=qa
Отмечу, что локальные переменные инициализируются последовательно сверху вниз в том же прогоне парсинга файла, то есть если переменная определена в середине файла, то ее нельзя использовать в управляющих конструкциях выше.
Глобальные переменные
Препроцессору можно указать файл, в котором находятся глобальные переменные, которые можно использовать в операциях.
Пример указания файла с переменными с помощью maven (можно использовать аргументы командной строки)
${pom.basedir}/configuration/qa.json
Формат файла
key0:value0
key1:value1
Использование плэйсхолдеров
window.appVersion = /*replace to=^${version}^*/0.6/*/replace*/;
Выражение ${version} будет заменено на значение соответствующей глобальной или локальной переменной переменной.
Помимо этого есть поддержка операций над переменными, в данный момент реализована только одна — удаление кавычек с конца и начала значения переменной:
${rootPath:removeQuotes}
Заключение
Ну вот в принципе и все, если кому пригодится буду рад, за найденные баги и предложения буду признателен.
GitHub
Исходники и тестовые странички: github.com/iseeyou911/JSPP
Файл конфигурации tests/qa.json. Чтобы сработал импорт в index.html нужно поправить
в строчке
абсолютный путь до этой папки.
