Сегодня большинство разработчиков веб-интерфейса тратят много времени на такие технологии, как Sass, LESS, HTML и JavaScript. Последние несколько лет были захватывающим временем в веб-разработке, и такие технологии, как Grunt, способствовали этому волнению.
В этой серии я планирую познакомить вас с Grunt и рассказать о том, как это может улучшить нашу разработку тем и плагинов WordPress. Мы также поработаем над настройкой Grunt, чтобы подготовить его для использования в вашем следующем проекте. Наконец, мы также рассмотрим инструменты командной строки.
О Гранте
Grunt — это инструмент автоматизации для разработчиков интерфейса. Он написан на JavaScript, поэтому, если вы знаете JavaScript, это должно быть красиво. Вот описание с сайта Grunt :
Одним словом: автоматизация. Чем меньше работы вам приходится выполнять при выполнении повторяющихся задач, таких как минификация, компиляция, модульное тестирование, линтинг и т. Д., Тем легче становится ваша работа. После того, как вы настроили его, исполнитель задач может выполнить большую часть этой мирской работы для вас — и вашей команды — практически без усилий.
Grunt — это инструмент, не зависящий от операционной системы, поэтому вы можете использовать его независимо от того, разрабатываете ли вы его на Mac, Windows или Linux. Это действительно делает его большим для больших команд, у которых есть смесь платформ, с которыми они развиваются. Самое приятное то, что когда вы настраиваете свой проект с Grunt, его легко обмениваться и с другими. Мы расскажем об этом подробнее в другом посте.
Node.js
Для тех из вас, кто не работал и не слышал об этом, Node.js — это среда выполнения JavaScript. За последние несколько лет он действительно развился, и такие технологии, как Grunt и Bower, действительно помогли ему ускорить внедрение. Вот описание с сайта Node:
Node.js — это платформа, основанная на среде выполнения Chrome JavaScript, для простого создания быстрых, масштабируемых сетевых приложений. Node.js использует управляемую событиями неблокирующую модель ввода-вывода, которая делает ее легкой и эффективной, идеально подходящей для приложений с интенсивным использованием данных в реальном времени, работающих на распределенных устройствах.
Узел является обязательным условием для использования Grunt, и он должен быть установлен на вашем компьютере и, возможно, на ваших серверах. Grunt использует npm для установки и управления плагинами. Подробнее о требованиях можно прочитать на странице « Начало работы» на веб-сайте Grunt.
Gruntfile
Как только вы получите задачи, необходимые для вашего проекта, вам понадобится способ их выполнения. Это где файл Gruntfile.js входит в картину. Gruntfile определяет, какие задачи включать и какие опции вы указываете для их выполнения.
Здесь вы, скорее всего, будете указывать свои цели и источники для каждой задачи. В качестве примера можно указать ваши предварительно скомпилированные файлы .scss и указать место, куда вы хотите сохранить скомпилированные файлы .css. Вы также будете указывать другие параметры, которые будут доступны каждому плагину. Они обычно документируются с каждым плагином.
Задания
Задачи действительно там, где сила, на мой взгляд. Задача — это просто способ выполнить группу плагинов. Вам нужно указать задачу по умолчанию, которая будет выполняться при запуске `grunt` . Вы можете использовать задачу наблюдения, чтобы автоматически выполнять задачи или плагины при изменении определенных файлов в вашем проекте.
Я планирую получить в задачах больше в следующем посте.
Вывод
Grunt — это, безусловно, инструмент, который вы должны узнать, являетесь ли вы фронтендом или разработчиком WordPress. Эта цитата с сайта Grunt действительно подводит итог,
Экосистема Grunt огромна и растет с каждым днем. Имея буквально сотни плагинов на выбор, вы можете использовать Grunt для автоматизации практически всего с минимальными усилиями. Если кто-то еще не создал то, что вам нужно, создание и публикация вашего собственного плагина Grunt для npm — это просто.
Если вы еще не начали использовать его в своих проектах, вы должны обязательно рассмотреть это.