В первой части этой серии я дал краткий обзор Grunt. Я также говорил о различных технологиях, которые требуются для использования. После этого я немного погрузился в Gruntfile и в его задачи.
Теперь я хочу поговорить о том, как использование Grunt может улучшить вашу разработку как для тем WordPress, так и для плагинов.
Простая настройка проекта
Моя любимая часть об использовании Grunt и npm заключается в том, что когда вы настраиваете свой проект, он самодокументирует зависимости вашего проекта. Это отлично подходит для команд разработчиков и проектов с открытым исходным кодом. Кто хочет написать документацию о том, как настроить рабочее пространство?
package.json
Во-первых, вам нужно будет иметь файл package.json в вашем проекте. Вам нужно будет настроить имя проекта, версию и описание. Подробнее об этом мы поговорим в следующем посте, но вот пример:
{
"name": "project-name",
"version": "1.0.0",
"description": "Awesome project"}
Как только вы это настроите, когда вы устанавливаете плагин grunt, вам просто нужно добавить --save-dev до конца, и он добавит плагин в ваш файл package.json в разделе devDependencies . Например, если бы я хотел добавить плагин grunt-contrib-watch в свой проект, я бы запустил следующую команду:
npm install grunt-contrib-watch --save-dev
Вы увидите, что плагин добавлен в вашу папку node_modules и в результате ваш файл package.json должен выглядеть так:
{
"name": "project-name",
"version": "1.0.0",
"description": "Awesome project", "devDependencies": {
"grunt-contrib-watch": "~0.5.x"
} }
Когда вы устанавливаете другие плагины Grunt и до конца добавляете --save-dev , вы увидите их добавленными в объекте devDependencies .
установка npm
Почему это выгодно? Как я упоминал ранее, это самодокументирование зависимостей ваших проектов. Как только вы установите все свои плагины и добавите их в файл package.json, теперь другой член команды или участник может запустить npm install и они установят все необходимое для проекта.
Вы можете легко проверить это, удалив всю папку node_modules и запустив npm install самостоятельно. Вы увидите, что все, что вы установили, установлено автоматически.
[note] Вы захотите добавить папку node_modules в свой файл .gitignore чтобы не переполнять свой репозиторий. [/ note]
Следите за изменениями
Я использую множество подобных плагинов Grunt для каждого проекта, но я всегда устанавливаю тот, на который я ссылался ранее, grunt-contrib-watch . Этот плагин при запуске будет наблюдать за файлами вашего проекта и запускать любые задачи, которые вы указали для этого файла или типа файла.
Одним из примеров будет для любого из ваших файлов JavaScript. Когда вы вносите изменения в один из них и сохраняете его, вы можете заставить Grunt запустить задачу JSLint, concat и minify. Вы также можете указать порядок, так что, когда один из них удастся, следующий стартует. Если кто-то терпит неудачу, он убивает всю последовательность задач.
CodeKit имеет аналогичную функцию, но он выполняет все ваши задачи. Например, если вы вносите изменения в файл SASS или LESS, он не только запускает эти задачи, но также запускает и ваши файловые задачи JavaScript. Задача Grunt watch дает вам больше контроля над тем, какие задачи запускаются при изменении определенных файлов или типов файлов.
Создание пользовательских задач
Наряду с задачами Grunt для устанавливаемых плагинов вы можете создавать свои собственные задачи. Часто, когда я настраиваю проект, у меня есть 3 задачи, которые я устанавливаю, по default , setup и build .
По умолчанию
Задача по умолчанию — это задача, которая будет запускаться вместе с вами и выполнять grunt из командной строки. Много раз я сопоставляю свою задачу часов с настройками по умолчанию. Вы можете добавить любую задачу, которую хотите запустить.
Настроить
Задача установки, которую я настраиваю, обычно выполняет то, что нужно только в первый раз для настройки вашего проекта. Много раз я использую Bower для загрузки сторонних библиотек, таких как Bootstrap, и мне нужно их свернуть, затем запустить задачу копирования, чтобы переместить некоторые файлы в мой проект, а затем начать первоначальную компиляцию файлов LESS и JavaScript.
Сложение
Задача сборки используется для того, что нужно сделать перед выпуском или распространением вашего проекта. Я всегда запускаю это, чтобы убедиться, что все соединено, минимизировано и сжато. Отличным примером является запуск grunt-contrib-imagemin для оптимизации всех изображений в вашем проекте. Другой пример — использование grunt-contrib-compress для создания zip-файла вашей темы, поэтому его легко установить через администратора WordPress.
Вывод
Grunt, безусловно, отличный инструмент для команд разработчиков. От автоматического документирования зависимостей вашего проекта до создания пользовательских, Grunt делает вас эффективными. Используйте Grunt для автоматизации различных задач в вашем проекте, чтобы вы могли сосредоточиться на создании своей темы или плагина WordPress.