Автоматизация проектов при помощи Apache Ant
Вам не кажется, что хватит выполнять задачи, которые можно автоматизировать? Сегодня мы этим и займёмся! Я покажу вам, как автоматизировать некоторые процессы. В этом уроке вы научитесь работать с Apache Ant.
Интро: Что такое Ant?
Ant позволяет невероятно простым способом автоматизировать задачи.
Ant - это специализированный софт, который предназначен для автоматизации софта. Его произвела фирма Apache (да, та же что сотворила сервер Apache), и его главной целью было создание приложений на Java. Когда вы пишите программное обеспечение (или веб приложение, сайт), вы выполняете одни и те же операции при начале работы с новым проектом. Порой это занимает внушительное количество времени, которое можно было потратить на что-то другое. Ant позволяет выполнять сразу несколько задач при помощи парочки команд, которые нужно набрать в терминале.
Готовы? Ну тогда поехали!
Шаг 0: Создание проекта
Перед тем, как мы перейдём к самому Ant, нам необходим простой проект. Мы будем использовать файл index.html со следующим содержанием:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dummy Project</title>
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/grid.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
<body>
<div>
<h1> Demo Page </h1>
<p> There are three CSS files and three JavaScript files in this project.
<ul>
<li><a href="http://meyerweb.com/eric/tools/css/reset/">Eric Meyer's Reset</a></li>
<li><a href="http://www.blueprintcss.org/">Grid.css from the Blueprint CSS</a></li>
<li>A custom stylesheet</li>
</ul>
<ul>
<li> <a href="http://jquery.com">jQuery</a></li>
<li> <a href="http://javascript.crockford.com/tdop/index.html">Douglas Crockford's Top Down Operator Precedence files tokens.js and parse.js.</a></li>
</ul>
<p> All these files are uncompressed; that's the point of this tutorial, after all. </p>
</div>
<script src="/js/jquery-latest.js"></script>
<script src="/js/tokens.js"></script>
<script src="/js/parse.js"></script>
</body>
</html>
Как вы уже успели заметить, этот фрагмент описывает весь тестовый проект. Все исходники вы можете найти в демо файлах, включая CSS и JavaScript.
И что же мы будем делать с этим проектом? Как вы уже заметили, мы присоединяем немалое количество файлов CSS и JavaScript к нашему проекту. Их мы проверим на работоспособность, хорошенько сожмём и через FTP закинем на сервер. Но перед всем этим, нам необходимо установить сам Ant.
Шаг 1: Установка Ant
Установка Ant может стать довольно-таки сложной задачей. Но благодаря специальным установочным файлам для Windows и Mac установочный процесс становится намного проще. Если вы пользуетесь Linux, то вы тоже можете без проблем установить себе Ant, правда для этого придётся немного погуглить.
Если вы являетесь пользователем Mac, то у вас наверняка Ant уже установлен; однако некоторые продвинутые задачи (например, такие как работа с FTP) не будут у вас работать. Для этого необходимо установить последнюю версию данного продукта.
Перед тем как мы начнём, я хотел бы вам показать полные инструкции, которые предоставляет сам Apache: вы можете найти их тут. (На самом деле это целый справочник по Ant; Я бы не смог написать лучше, чем тот, что уже готов. На странице, которую я указал, вы можете найти раздел “Installing Apache Ant”.) Всё, что я скажу вам ниже, вы можете найти на странице, которую я вам дал (ну и конечно же даже больше), но моя версия более удобна для web-разработчиков.
В первую очередь, нам необходимо определить, все ли пакеты Java установлены. Вне зависимости от того, что вы используете Windows или Mac, вам необходимо установить Java Development Kit (JDK) – версия не ниже 1.4. Вы можете скачать её тут. Если вы не уверены в том, какая версия JDK у вас установлена, запустите команду java -version в терминале или командной строке. Как я понял, версия JDK совпадает с версией Java, которая стоит на вашем компе.
Теперь давайте скачаем последнюю версию Ant. Вы можете скачать её отсюда (конечно же вы можете скачать код отсюда и самим его скомпилировать, если хотите):
После того, как вы всё скачали и распаковали, вам необходимо начать установку. Вот что должно у вас получиться:
Первые шаги установки зависят от платформы, которой вы пользуетесь. Давайте начнём с шагов, которые ждут вас на Windows:
Шаги установки на Windows
В первую очередь, вам необходимо определиться с местом, куда будет установлен Ant. Я выбрал C:\ant, но вы можете выбрать и другое месторасположение. Если вы повторяете шаги за мной, то создайте эту папку и переместите каталоги bin, lib, и etc в неё. Также сюда вам необходимо переместить fetch.xml и get-m2.xml.
После того, как с этим покончено, вам необходимо установить некоторые переменные среды:
- Вам будет необходима переменная с именем ANT_HOME; Значение переменной должно соответствовать пути к самому Ant. К примеру: C:\ant.
- Далее вам понадобится переменная JAVA_HOME; она уже может присутствовать у вас в системе, если же нет, то она должна ссылаться на Java. В моём случае это C:\Program Files\Java\jdk1.6.0_18.
- Далее вам необходимо отредактировать переменную Path. Она содержит список файлов и папок, которые подключаются, когда вы работаете с командной строкой. НЕ НУЖНО там всё заменять; просто добавьте ;%ANT_HOME%\bin в самый конец и всё. Не забудьте о точке с запятой; Она служит разделителем в этом списке. Вы наверное уже догадались, что %ANT_HOME% - это переменная, которую мы создали ранее.
Теперь у вас Ant успешно установлен на вашем Windows! Далее есть ещё несколько важных шагов, которые нужно пройти.
Чтобы завершить установку, вам необходимо сделать следующее. Существует немало компонентов, которые не установлены в Ant по умолчанию, но которые понадобятся в нашем проекте. Давайте же установим и их.
Начнём с того, что откроем командную строку или терминал и перейдём в каталог, который только что создали (Ant). Сейчас мы будем иметь дело с файлом fetch.xml. Теперь запустите команду:
ant -f fetch.xml -Ddest=system
Это команда запустит процесс скачивания и установки некоторых компонент; это может занять некоторое время.
Теперь ваш Ant установлен и полностью готов к работе.
Шаг 2: Создание файла build.xml
Ant использует специальный XML файл для хранения задач, которые относятся к тому или иному проекту.
Ant использует XML файл для хранения задач для текущего проекта; когда вы находитесь в этой директории посредством командной строки, то можете запускать команды следующего вида ant TASK_NAME_HERE, и он найдёт соответствующую задачу в XML файле.
Если вы не знакомы с форматом XML, то не волнуйтесь. XML расшифровывается как eXtensible Markup Language, и он очень похож на HTML. В нём также используются теги и атрибуты. Он также очень похож на XHTML, в своей строгой ограниченности: все теги и атрибуты должны быть написаны прописными буквами, значения помещены в кавычки, необходим doctype и многое другое. Не волнуйтесь, вы всё это быстро освоите.
Файл XML, который используется Ant по умолчанию должен называться build.xml; Вам необходимо переместить этот файл в каталог с проектом.
Итак, что же должно храниться в этом XML файле? В первую очередь, вот это:
<?xml version="1.0"?> <project name="Compress, Concatenate, and FTP CSS and JS" default="initialize"> </project>
Не правда ли похож на HTML? Первая строка - это XML doctype. Далее у нас следует родительский элемент, который в нашем случае называется project. Ему я добавил несколько атрибутов: name, который будет объяснять какого рода будут задачи; и default, который содержит задачу по умолчанию.
Теперь я продемонстрирую запуск задачи. К примеру, мы создали задачу с названием call_mom. Для того, чтобы её запустить, нужно сделать следующее:
Если вы будет запускать Ant для вашего проекта, то запустится задача, которая стоит по умолчанию. В нашем случае мы назначили задачу initialize задачей по умолчанию.
Эти две записи эквивалентны.
Теперь, когда у нас есть файл build.xml, мы можем создать первую задачу.
Шаг 3: Написание первой задачи
Задачи представляют собой тег targets, который хранится в файле build.xml. Ну что-то типа этого:
<target name="call_mom">
<echo> Hi Mom! </echo>
</target>
Добавьте это в ваш файл build.xml и запустите ant call_mom через консоль. В результате вы должны получить что-то вроде этого:
Buildfile: /path/to/your/build.xml
call_mom:
[echo] Hi Mom!
BUILD SUCCESSFUL
Total time: 0 seconds
На выходе Ant сообщит вам результаты того, что только что сделал. Вы получите информацию о каждой выполненной задаче. Как вы видите, мы вызвали задачу echo, которая напечатает нам то, что мы ей укажем.
Но как я мог догадаться, что echo - это задача? Что ж, тут вы можете получить список всех встроенных задач. Одни и те же задачи можно выполнить разными способами. К примеру, то же самое мы можем сделать следующим образом: <echo message="Hi Mom!" />. И это ещё не предел.
Теперь, когда вы уже поняли основные принципы Ant, можем перейти к некоторым свойствам.
Шаг 4: Создание файла Свойств
Ant также содержит свойства, которые очень смахивают на знакомые вам переменные.
<property name="js_dir" value="js" /> <!-- or --> <property name="css_dir">stylesheets</property>
Вы так же можете вынести все свойства в отдельный файл, а потом просто его импортировать. Это мы и сделаем. Это поможет нам создать реальную задачу:
<target name="get_properties">
<property file="ant.properties" />
<echo>Imported Properties</echo>
</target>
Нашей задаче мы дали название get_properties. Она содержит два действия: первое, мы используем задачу property для импортирования файла (благодаря атрибуту file). После этого, мы выводим сообщения о том, что импорт прошёл успешно. Всё очень просто.
Конечно же нам необходимо создать файл ant.properties. Его содержание будет очень простым:
css_dir = css js_dir = js assets_dir = assets
Вы можете подумать, что мы всё усложняем, ведь названия переменных намного больше их значений. Это так, но это даёт нам некие шибкие возможности, которые мы можем использовать в build.xml.
Шаг 5: Создадим ещё парочку задач
Ну всё, шутки в сторону. Теперь настало время написать несколько серьёзных задач для нашего файла build.xml.
Вот список того, что мы хотим сделать:
- Скомпилировать CSS файлы.
- Сжать CSS файлы.
- Скомпилировать JavaScript файлы.
- Сжать JavaScript файлы.
- Загрузить всё на сервак.
- Инициализировать другие задачи.
- Убраться за собой.
Для всего этого мы будем использовать несколько различных тактик. Этим-то и хорош Ant.
Компиляция CSS и JavaScript
Давайте начнём с задач по компиляции; Задача заключается в том, чтобы конкатенировать несколько файлов в один. Для этого Ant содержит специальную команду concat.
<target name="concat_css">
<concat destfile="${assets_dir}/style.css">
<filelist id="files" dir="${css_dir}">
<file name="reset.css" />
<file name="grid.css" />
<file name="custom.css" />
</filelist>
</concat>
</target>
Я назвал задачу concat_css. Внутри мы запускаем команду concat. Как вы можете заметить, единый сформированный файл (destfile) будет создан в каталоге assets/style.css. Вы так же заметили, что я пользуюсь свойством assets_dir, которое заменится на необходимое нам значение. Для этого свойство нужно заключить в скобки и перед ними поставить знак доллара.
Внутри задачи concat мы определили filelist Это всего лишь один из способов, которые мы можем использовать для перечисления файлов. Я использую именно этот способ, т.к. он позволяет мне указать порядок файлов для конкатенации. Ему я также даю id, который служит неким параметром. Так вы можете заметить атрибут dir, который хранит адрес, где находятся файлы. Внутри же мы создаём ещё одни блоки file, с атрибутами name.
Вот ваша первая реальная задача! Надеюсь вопросов у вас не осталось. Объединение файлов JavaScript не будет особо отличаться:
<target name="concat_js">
<concat destfile="${assets_dir}/script.js">
<filelist id="files" dir="${js_dir}">
<file name="jquery-latest.js" />
<file name="tokens.js" />
<file name="parse.js" />
</filelist>
</concat>
</target>
Сжатие файлов CSS и JavaScript
А вот тут придётся немного поколдовать, т.к. в Ant не предусмотрено такой задачи. Однако, Ant поддерживает команды java для файлов с расширением .jar. Это супер новость для нас, т.к. YUI Compressor доступен нам как файл .jar. Вы можете скачать его тут. Скачайте его и переименуйте, если хотите. Я сохранил его в каталоге MY_USER_FOLDER/bin/yui.jar.
Теперь YUI Compressor сожмёт наши JavaScript и CSS файлы. Всё что мы тут можем сделать, так это создать отдельную задачу compress, а затем вызывать её из какой-то другой задачи. Мы можем это сделать, т.к. Ant поддерживает вызов одних задач из других. Ну а теперь снова практика:
<target name="compress">
<java jar="/Users/andrew/bin/yui.jar" fork="true">
<arg value="${file}" />
<arg value="-o" />
<arg value="${file}" />
</java>
<echo>${file}</echo>
</target>
Тут мы используем команду java. Это очень похоже на команду, которую мы бы написали в командной строке. Атрибут jar ссылается на .jar файл. Если атрибут fork равен true, то jar запустится и сделает всю работу. Затем внутри блока java, мы определяем некоторые аргументы. В командной строке мы бы сделали это так input.file -o output.file. Тут почти то же самое.
Откуда же берётся свойство file? Вот отсюда:
<target name="compress_css" depends="concat_css">
<antcall target="compress">
<param name="file" value="${assets_dir}/style.css" />
</antcall>
</target>
Это и есть наша задача для сжатия CSS. Во-первых, прошу отметить, что блок target содержит второй атрибут: depends. Вы наверное уже всё поняли. Задача compress_css зависит от задачи concat_css. Именно поэтому мы вызываем её первой. Таким образом, мы можем вызвать compress_css, которая в первую очередь вызовет concat_css.
Что же теперь? Мы выполняем задачу antcall, которая в свою очередь, вызовет другую задачу, содержащуюся в файле build.xml — в частности задачу compress. Внутри мы можем указать столько параметров, сколько захотим, каждый из которых может иметь имя и значение. Это очень похоже на вызов функции.
А вот и JavaScript версия:
<target name="compress_js" depends="concat_js">
<antcall target="compress">
<param name="file" value="${assets_dir}/script.js" />
</antcall>
</target>
Не забудьте, всё зависит от concat_js.
Сдвигаемся с мёртвой точки
Вернёмся к самому началу - блоку project — мы назначили задачей по умолчанию задачу initialize. Мы ещё не создали эту задачу. Вот она:
<target name="initialize" depends="get_properties,clean_up">
<mkdir dir="${assets_dir}" />
<antcall target="compress_css" />
<antcall target="compress_js" />
<echo>Done!</echo>
</target>
Эта задача зависит от двух других (одну нам ещё предстоит сделать); список задач, мы просто разделяем запятыми.
Внутри задачи мы создаём каталог assets благодаря задаче mkdir (так же как мы бы сделали это в терминале). Далее мы делаем несколько вызовов ant, один для сжатия CSS и второй для сжатия JavaScript. Запомните, что эти две задачи зависят от конкатенации. В конце концов, мы выведем echo сообщение, чтобы пользователь понял, что работа завершена.
Убираем за собой
А что же насчёт задачи clean_up? Она очень проста:
<target name="clean_up" depends="get_properties">
<delete dir="${assets_dir}" />
</target>
Данная задача удаляет каталог assets. Это не крайне нужная задача. Я создал её просто для порядка.
Закачиваем проект
Давайте создадим ещё одну задачу; мы хотим загрузить наш проект на сервер. Благодаря ftp команде, это реализуется очень просто.
<target name="upload_files" depends="initialize">
<ftp server="your_server.com"
userid="your_user_name"
password="your_password"
port="21"
remotedir="/public_html"
passive="yes"
binary="no">
<fileset dir=".">
<include name="assets/*" />
<include name="index.html" />
</fileset>
</ftp>
</target>
Мы назовём эту задачу upload_files, и она будет зависеть от initialize. Тут мы используем FTP задачу. Как вы могли заметить, все необходимые данные записываются в атрибуты. Если вы работали с FTP клиентами, то вам всё это должно быть знакомо.
- Внутри блока ftp, мы создали коллекцию файлов, которые будут закачены.В нашем случае мы используем элемент fileset.
- У нас также имеется атрибут dir в блоке filset, который определяет родительский каталог.
- Затем внутри мы используем блок include для выборки нужных нам файлов: для перечисления файлов, снова используем атрибуты. В нашем примере, мы выбираем всё содержание каталога assets и файл index.html.
После того, как вы запустите эту задачу, она закачает все файлы на сервер!
Обратите внимание на очерёдность всех задач. Если мы запустим ant из командной строки, то мы конкатенируем наши CSS и JavaScript файлы, и он не будут загружены; так по умолчанию. Если же мы хотим загрузить файлы, то нам необходимо запустить ant upload_files; Тут всё зависит от initialize. Конечно же мы можем вызвать каждую задачу по отдельности (пример: ant compress_js).
Вывод: нужно пользоваться
Перед тем, как завершить данный урок, я бы хотел сказать ещё пару слов:
- Заметьте, что я использую задачу initialize для вызова других задач. В этом случае всё более разделено семантически.
- То что я вам показал, это всего лишь маленькая кроха от всех возможностей Ant. Если вы продолжите осваивать данный инструмент, то узнаете, что одни и те же задачи можно выполнить по-разному (в этой статье был пример с задачей echo). То, как я это делал, - “не единственный способ”!
- Было бы прикольно заиметь задачу, которая будет парсить HTML, находить таблицы стилей и скрипты, расставляя их в правильном порядке. Однако, так как Ant не был создан для веб разработчиков, таких возможностей он не предоставляет. Нам приходится писать специальные antlib (расширения) на языке Java.
Вот и всё! Я надеюсь, что вы чему-то научились и эти знания пригодятся вам в будущем. Благодарю за внимание!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/SUmFVo_Bcrg/lessons.php
|
Вам не кажется, что хватит выполнять задачи, которые можно автоматизировать? Сегодня мы этим и займёмся! Я покажу вам, как автоматизировать некоторые процессы. В этом уроке вы научитесь работать с |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Власть над собой — высшая власть. Луций Анней Сенека |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.