Как стать автором
Обновить

JavaScript|HTML Preprocessor

Время на прочтение 5 мин
Количество просмотров 10K

Здравствуйте, дорогие друзья!


В один чудесный день в один чудесный час возникла острейшая необходимость в 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
        <script type="text/javascript" src="vendors/release/dojo/dojo-mini.js" ></script>
        <script type="text/javascript" src="vendors/release/dijit/dijit-mini.js" ></script>
        <script type="text/javascript" src="vendors/release/dojox/dojox-mini.js" ></script>
/insert-->



js


/*insert
        var mode = 'dev'
/insert*/


Замена (replace to ?pattern ?if)

to — строка, на которую будет произведена замена (поддерживает плэйсхолдеры)
pattern — шаблон для замены подстроки

Примеры


html


<!--replace to=^<script type="text/javascript" src="vendors/release/dojox/dojox-mini.js" ></script>^-->
<script type="text/javascript" src="vendors/release/dojox/dojox-mini.js" ></script>
<!--/replace-->


Заменит все, что находится между управляющими комментариями, на значение атрибута to.

<!--replace to=^/release/^ pattern=^/dev/^-->
        <link rel="stylesheet" type="text/css" href="vendors/dev/dijit/themes/tundra/tundra.css">
        <link rel="stylesheet" type="text/css" href="vendors/dev/dojox/grid/resources/Grid.css">
        <link rel="stylesheet" type="text/css" href="vendors/dev/dojox/image/resources/Lightbox.css">
<!--/replace-->


Заменит все подстроки совпадающие с значением атрибута 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


<!--import file=^path^ type=^css^-->


js


//import file=^path^ type=^css^


Локальные переменные (define key=value|key)

Инициализация локальной переменной (область ее видимости текущий файл). Если указан только ключ, то будет создана, пустая переменная.
key — имя переменной
value — значение

Примеры

html


<!--define debug=true-->
<!--define env=qa-->


js


//define debug=true
//define env=qa


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

Глобальные переменные


Препроцессору можно указать файл, в котором находятся глобальные переменные, которые можно использовать в операциях.

Пример указания файла с переменными с помощью maven (можно использовать аргументы командной строки)

<project.confPath>${pom.basedir}/configuration/qa.json</project.confPath>


Формат файла


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 нужно поправить
в строчке
<!--define path=../tests/-->

абсолютный путь до этой папки.
Теги:
Хабы:
+6
Комментарии 2
Комментарии Комментарии 2

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн