Adobe Illustrator как крякнуть

Обновлено: 21.11.2024

В первом посте этой серии я дал краткий обзор Grunt, а в следующем я расскажу вам о необходимых шагах, чтобы узнать, как использование Grunt может улучшить ваши навыки разработки WordPress.

В частности, мы подробно поговорим о необходимых файлах, таких как package.json и Gruntfile.js, но сейчас мы собираемся создать несколько файлов-примеров, чтобы вы могли запускать Grunt со своей темой WordPress или проектом плагина. .

Создание файлов вашего проекта

Прежде чем начать, полезно ознакомиться с содержанием, упомянутым в первой статье этой серии.

Когда все будет готово, вернитесь к этой статье, и мы приступим к созданию файлов проекта. Это в конечном итоге даст нам общее представление о том, как выглядит настройка Grunt для любого конкретного проекта.

В следующей статье мы рассмотрим, как это сделать специально для работы с WordPress, но пока сосредоточимся на более общем подходе.

1. Создайте файл package.json

Первое, что мы сделаем, это создадим файл package.json в корне проекта. Внутри этого нового файла добавьте следующее:

Нет необходимости добавлять объект devDependencies, так как он будет добавлен автоматически, когда мы установим задачи Grunt через командную строку.

2. Установить задачи

Чтобы установить задачи Grunt, вам нужно переключиться на выбранный вами инструмент командной строки. Если вы работаете на Mac, это будет Terminal или iTerm. Если вы работаете на ПК, я бы посоветовал использовать PowerShell.

Сначала перейдите в корневую папку вашего проекта (`cd development-folder/project-folder`). Далее мы собираемся установить задачу для компиляции файлов LESS. Мы собираемся установить задачу без участия ворчания, поэтому введите в командной строке следующее и нажмите Enter:

npm install grunt-contrib-less --save-dev

Вы увидите набор строк, распечатываемых по мере того, как задача и все ее зависимости загружаются из npm. Когда это будет сделано, вы должны увидеть что-то вроде этого:


Установка grunt-contrib-less

Теперь вы сможете перейти к файлу package.json и увидеть добавление grunt-contrib-less к вашему объекту devDependencies. Вы также добавите номер версии рядом с именем. Я мог бы рассказать об обозначении версии в другом посте, но пока знайте, что тильда относится к версии, с которой мы сейчас работаем.

На этом этапе вы должны увидеть следующее:

Далее добавим задачу для отслеживания изменений в наших файлах `.less`. Мы собираемся использовать задачу grunt-contrib-watch. Вернитесь к командной строке и нажмите Enter:

npm install grunt-contrib-watch --save-dev


Установка grunt-contrib-watch

Снова вы должны увидеть вывод на экране, и когда он будет завершен, он будет добавлен в ваш файл package.json. Теперь это должно выглядеть примерно так:

Надеюсь, теперь вы освоились и сможете использовать тот же процесс для добавления других задач Grunt. Просто напоминание всегда добавлять `--save-dev` .

Gruntfile.js

Теперь, когда у нас установлено несколько задач Grunt, давайте начнем их использовать. Первое, что нам нужно сделать, это создать файл Gruntfile.js в корневой папке нашего проекта. Здесь мы собираемся указать наши задачи и настроить их.

Для этого добавьте в файл следующее:

Задачи

Первое, что нам нужно сделать, это загрузить наши задачи, чтобы мы могли их выполнять. Вы делаете это, добавляя использование функции loadNpmTasks для каждой задачи. Добавьте в фигурные скобки следующее:

Следующее, что нам нужно сделать, это настроить конфигурацию для наших установленных задач Grunt. Нам нужно использовать функцию initConfig следующим образом:

Теперь после запятой мы добавим нашу конфигурацию для каждой установленной нами задачи. Обычно вы найдете примеры настройки каждой задачи в файле README.md в проекте на GitHub. Каждая задача будет иметь разные параметры конфигурации, поэтому сначала обязательно ознакомьтесь с документацией.

1. МЕНЬШЕ Задача

Первая задача, которую мы собираемся настроить, — это задача без ворчания. Он скомпилирует наши файлы .less в файлы .css. Вы захотите создать новую папку для ваших файлов .less и создать новую. Обычно я создаю папку css/less и помещаю туда все свои файлы .less.

Давайте, добавьте новый файл с именем style.less и добавьте в него код следующим образом:

Теперь вернемся к нашему файлу Gruntfile.js и добавим следующее:

less: options: paths: 'css/less',
yuicompress: true
>,
files: 'style.css': 'css/less/style.less' < бр />>
>

После того как вы сохраните файл, вы сможете перейти к командной строке, ввести grunt less и нажать Enter. Это запустит основную задачу, скомпилирует наш файл .less и создаст новый файл style.css в корневой папке нашего проекта.

2.Смотреть задачу

Теперь, когда у нас есть задача для компиляции файлов .less, давайте добавим для нее задачу наблюдения. Кому захочется переходить в командную строку и запускать grunt less каждый раз после внесения изменений в файл, верно?

После нашей предыдущей настройки добавьте запятую, а затем следующее:

После сохранения файла вернитесь к командной строке и введите grunt watch . Это должно увидеть следующее:


хрюкающие часы

Это означает, что часы Grunt ожидают любых изменений в одном из файлов, указанных вами в конфигурации. Перейдите в свой файл style.less и внесите следующие изменения:

После того как вы сохраните файл, запустится задача наблюдения, которая скомпилирует ваши файлы .less в файл style.css. После завершения он продолжит просмотр этих файлов и будет готов к следующему изменению.


компилировать хрюканье

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

Заключение

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

Но сначала мы рассмотрим, как включить это в наши проекты WordPress.

Последние несколько месяцев мы разрабатывали и создавали собственную систему значков и реализовывали ее с помощью SVG.

В обоих наиболее популярных подходах используется встроенный SVG либо в HTML-разметке, либо с помощью классов CSS. Мы решили использовать классы CSS, но иногда в крайнем случае встраивали SVG HTML (подробнее об этом позже).

Начало работы

Все наши дизайнерские ресурсы находятся в Adobe Illustrator. Каждый значок представляет собой отдельный артборд, что позволяет легко сохранять каждый из них как отдельный файл SVG. VHX построен на Rails, и в настоящее время мы полагаемся на Asset Pipeline и Compass. Compass отлично подходит для спрайтов с PNG, но в настоящее время он не поддерживает SVG. (В проекте Compass на Github существует давняя проблема.)

Мы давно хотели использовать средство запуска задач на основе JS, Grunt, и это был отличный шанс начать. Пост Криса Койера на CSS-Tricks — удобный справочник по этому вопросу.

Почему Грант?

Grunt написан на Javascript.

Grunt отлично подходит для разработчиков интерфейсов. Мы используем Grunt в качестве инструмента для создания ассетов — JS позволяет нам быстрее выполнять итерации, экспериментировать и совершенствовать этот процесс.

Grunt работает быстро.

Поскольку Grunt занимается исключительно задачами, связанными с активами, он работает очень быстро. Очень важно, пока вы возитесь.

Grunt является портативным.

По сравнению с доработкой рабочего процесса в Asset Pipeline перенос настроек Grunt между разными приложениями и платформами — это просто изменение путей к файлам.

Реализация

После создания папки с именем SVG в нашем приложении, в которой хранятся все наши значки из Illustrator, мы используем задачи Grunt для тяжелой работы:

    для нормализации имен SVG очищает и минимизирует SVG для создания линейного встроенного в CSS спрайта для создания файла тихих классов для использования @extend во всем приложении (необязательно) для создания встроенного в HTML спрайта (необязательно)

Почему шаги 4 и 5 необязательны?

copy требуется только в том случае, если вы хотите использовать SASS @extend для значков в вашем CSS, за пределами имен классов, сгенерированных grunticon. Мы настроили его для создания дубликата таблицы стилей SVG grunticon, заменив ведущие . с участием % . В противном случае использование @import в начале каждого файла SASS в вашем приложении создаст сотни повторяющихся строк CSS.

svgstore предназначен специально для создания встроенного в HTML спрайта SVG. А зачем вам один из них?

CSS и встраивание SVG в HTML

  • Встроенный HTML-код позволяет использовать стандартные методы CSS или JS для изменения цвета значка (например, при нажатии мыши :hover изменить цвет значка).
  • Если вы создаете значки с несколькими цветами, вам придется использовать встроенный CSS.

Предупреждения

  • Встроенный CSS: ваш SVG является фоновым изображением, и вы не можете изменить его с помощью CSS или JS. Лучшее, что мы сделали, это использовали @extend, чтобы использовать версию другого цвета (сгенерированную grunticon). К этому нельзя добавить переходы CSS.
  • HTML-inline: вы не можете настроить таргетинг на отдельные пути SVG, что делает многоцветные значки немного бюстом.

Движение вперед

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

Значок с использованием встроенного HTML SVG с переходом CSS на :hover :

После того, как вы настроите свое приложение, управлять значками станет проще простого. Нам очень нравится этот рабочий процесс, основанный на Grunt, и мы планируем полностью отказаться от Asset Pipeline ради него. Последующий пост, как только это произойдет!

Сделано с любовью в Бруклине, штат Нью-Йорк, США. ТМ + © 2017 Vimeo, Inc.Все права защищены.

В предыдущем посте этой серии я провел вас через настройку Grunt в вашем проекте. Теперь, когда мы все настроили, я хотел бы рассказать о нескольких продвинутых методах, которые вы можете использовать с Grunt.

В частности, я сосредоточусь на настройке ваших существующих задач и на том, как создавать собственные задачи.

Конфигурация

Каждый проект уникален, и то, как вы настроите свой Gruntfile.js, будет полностью отличаться от того, как, скажем, кто-то другой настроит свой собственный. Конечно, Grunt готов справиться с любой задачей, которую вы хотите настроить.

Вложение

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

Чтобы сделать это, вы просто создадите несколько объектов внутри объекта плагина Grunt. Распространенным вариантом использования будет создание нескольких файлов для вашей темы, как для темы, так и для администратора. Давайте воспользуемся этим примером, чтобы исказить файлы JavaScript темы при их изменении, а затем испортить файлы JavaScript панели управления, когда они изменятся.

Не забудьте добавить плагин в свой проект:

Затем мы можем настроить конфигурацию нашего процесса uglify:

Теперь мы настроим нашу задачу наблюдения, чтобы запускать определенные задачи при изменении разных файлов:

Теперь, когда вы запускаете свои часы, они запускают только соответствующую конфигурацию uglify на основе измененного файла. Вы также можете запустить задачу Grunt самостоятельно, введя либо grunt uglify:theme, либо grunt uglify:admin в командной строке.

Использование package.json

Иногда задачам требуется доступ к чему-либо из файла package.json, например к имени, версии, автору, домашней странице и т. д. Вы часто видите это с баннером, который добавляется в начале скомпилированного файла JavaScript или CSS. Я также использовал его в сочетании с плагином grunt-contrib-compress.

Чтобы прочитать элементы в файле package.json, вам нужно добавить следующее в вашу функцию initConfig, чтобы задачи могли читать его следующим образом:

Теперь, когда у вас есть эта строка кода, вы можете получить доступ к различным элементам следующим образом:

В файле Bootstrap Grunt есть отличный пример. Вы можете видеть, что они используют ряд элементов в файле package.json в своем объекте баннера, который они создают.

Загрузить задачи Grunt

Я также упомянул, что необходимо загружать все ваши черновые задачи перед их выполнением. Это может немного утомить, если вы часто добавляете и удаляете плагины. Если вы не хотите об этом беспокоиться, вы можете использовать отличный плагин load-grunt-tasks.

Это существенно изменит следующее:

Есть и другие замечательные вещи, которые вы можете сделать с помощью этого плагина, чтобы очистить ваш Gruntfile. Я не буду вдаваться в подробности, так как уже есть отличный пост о том, как это сделать.

Пользовательские задачи

Еще один отличный способ настроить файл grunt – создать собственные задачи. Я собираюсь поделиться с вами тремя, которые я обычно добавляю в проект.

По умолчанию

В вашем проекте рекомендуется использовать задачу по умолчанию. По сути, это то, что вы хотите получить, просто набрав grunt в командной строке. Это зависит от вашего проекта, но часто мне хочется запустить задачу просмотра по умолчанию.

Вот как это сделать:

Вы можете выбрать любые задачи, которые хотите запустить, просто разделив их запятой. Допустим, вы хотите запустить uglify тогда смотрите, вот как это сделать:

grunt.registerTask('default', ['uglify, watch']);

На что следует обратить внимание при наличии нескольких задач: они будут выполняться в указанном вами порядке. Если одна задача завершается сбоем, она останавливает процесс в этой точке выполнения и не запускает остальные задачи, которые вы определили.

Еще одна задача, которую я обычно настраиваю, — это задача для распространения. Допустим, я закончил разработку релиза и хочу подготовить свой проект к распространению.

Для этого примера у меня есть ряд задач, которые я хочу выполнить как для файлов JavaScript, так и для файлов SASS.

Что касается файлов JavaScript, я буду использовать JSLint для проверки синтаксиса, объединяю некоторые из них в один файл, а затем удаляю окончательный файл. Затем я запущу компиляцию для всех моих файлов SASS. Наконец, я запущу копирование, чтобы переместить все файлы в соответствующие места, а затем сжать проект в ZIP-файл, чтобы кто-то мог установить его через панель управления WordPress.

Вот пример:

grunt.registerTask('dist', ['jslint, concat, uglify, sass, копирование, сжатие']);

Заключение

Теперь у вас должно быть представление о некоторых более продвинутых методах Grunt для вашего проекта.Есть еще несколько приемов, которые вы обнаружите, проводя время с Grunt.

На этом мы завершаем серию статей об использовании Grunt в вашем проекте WordPress. Мы поговорили о том, что такое Grunt, о причинах его использования, о том, как настроить его в своем проекте, и рассмотрели некоторые передовые методы. Grunt продолжает набирать популярность наряду с другими фронтенд-технологиями. Надеюсь, это только начало ваших экспериментов с Grunt и другими подобными инструментами.

Подключаемый модуль Grunt, который помогает отлаживать и упаковывать расширения на основе HTML5 для приложений Adobe Creative Cloud.

С помощью этой задачи вы можете отлаживать и упаковывать расширения на основе HTML5 для продуктов Adobe® Creative Cloud® непосредственно из Grunt, полностью автоматически и без подключаемого модуля Adobe Extension Builder.

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

Он основан на инструменте командной строки csxs от Creative Market.

Установите плагин:

После установки плагина его можно включить в вашем Gruntfile как обычно:

Вы можете использовать шаблон grunt-init-cep, чтобы легко начать работу. Инструмент шаблона автоматически установит все необходимые файлы и предоставит базовый шаблон расширения, уже настроенный для работы в выбранных целевых приложениях.

Пожалуйста, обратитесь к документации grunt-init-cep для получения инструкций по установке и использованию.

Значок пакета, файлы манифеста, MXI и update.xml, предоставленные шаблоном, также можно найти в папке res/bundle, расположенной внутри папки установки плагина. При желании вы можете вручную скопировать эти файлы вместо использования шаблона grunt-init-cep.

grunt-cep настроен на использование этих файлов по умолчанию, поэтому просто скопируйте папку res/bundle в корень вашего проекта (то есть в ту же папку, что и ваш Gruntfile.js) и тебе пора идти.

Пользовательский манифест, файлы XML и MXI

Файлы шаблонов XML и MXI заполняются во время сборки с использованием свойств конфигурации. Для большинства расширений предоставленные шаблоны должны работать нормально, но для сложных расширений может потребоваться внести изменения в эти файлы или даже предоставить собственные.

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

Вы можете запустить задачу с помощью этой команды:

grunt-cep имеет несколько параметров, которые можно настроить в соответствии со своими потребностями. Чтобы не загромождать ваш Gruntfile.js, рекомендуется хранить параметры во внешнем файле Javascript или JSON для более удобного редактирования и импортировать их во время выполнения, используя один из следующих способов:

Параметры, определенные во внешнем файле, при необходимости могут быть перезаписаны в дочерних задачах (см. пример ниже). Значения по умолчанию и более подробное описание всех приведенных ниже свойств можно найти в файле /options/defaults.js в папке установки плагина.

Эти свойства определяют параметры базовой задачи.

Активный профиль сборки. Допустимые свойства включают:

debug : создает расширение в режиме отладки, включая такие файлы, как .debug, для удаленной отладки расширения.

Обратите внимание: при построении с использованием профиля отладки суффикс .debug автоматически добавляется к имени и идентификатору расширения.

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

Это может быть либо папка, содержащая необработанные исходные файлы, либо результат автоматизированного процесса сборки при использовании других подключаемых модулей Grunt, таких как grunt-contrib-requirejs

Содержит информацию о пакете расширений, который является контейнером для всех расширений, указанных ниже. Если необходимые данные здесь не указаны, grunt-cep попытается загрузить их из первого расширения, указанного в массиве cep.extensions.

< td valign="top">Имя пакета, отображаемое в диспетчере расширений.
версия строка Номер версии пакета (формат: XXX ).
id String Уникальный идентификатор пакета (используется Creative Cloud и Extension Manager). Обычно предоставляется в виде com.developer_name.bundle_name .
name String
author_name String Автор или название компании.
mxi_icon Объект Значок пакета, отображаемый в Менеджер расширений. Значок должен быть в формате PNG размером 23 x 23 пикселя.
update_url String URL-адрес, содержащий файл обновления XML с расширением и пакеты. Extension Manager проверит наличие обновлений расширения в /update.xml и автоматически загрузит обновленный пакет из /_.zxp .
description String Описание расширения для отображения в Менеджере расширений (поддерживает HTML-разметку). Это отображается только в том случае, если URL-адрес не введен в свойство description_href.
description_href String URL-адрес, указывающий на HTML-файл, содержащий описание, отображаемое в диспетчере расширений при выборе пакета расширений. Если предоставленное описание не используется.
ui_access String Описание доступа к расширению, отображаемое в Менеджере расширений (поддерживает разметку HTML).
лицензионное_соглашение String Лицензионное соглашение, отображаемое при установке расширения (поддерживает HTML).
manifest String Шаблон файла манифеста пакета, заполняемый во время выполнения информацией о пакете. Вы можете использовать один из предоставленных манифестов (например, bundle/manifest.bundle.cc.xml ) или предоставить свой собственный. Обычно это лучше указать в массиве builds, чтобы разрешить настройку для каждого продукта (см. пример ниже).
файлы Массив Начиная с 0.3.0 — Список дополнительных файлов, которые будут добавлены в комплект расширения. Это передается непосредственно в Grunt и поддерживает форматы Compact и Files Array Grunt. Дополнительную информацию см. в документации по Grunt.

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

Настройка жизненного цикла расширения. Содержит два свойства:

  • auto_visible (логическое значение): значение true, чтобы пользовательский интерфейс расширения автоматически отображался при запуске.
  • events (Array): массив строк, содержащих события, которые могут запускать расширение.

Возможность указывать отдельные сборки — одна из самых мощных функций grunt-cep при работе со сложными пакетами расширений.

Свойство cep.builds представляет собой массив объектов, описывающих различные сборки, которые должны быть выполнены, каждая из которых приводит к созданию отдельного файла ZXP, который будет объединен с окончательным ZXP установщик.

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

продукты Массив Массив строк, содержащих названия продуктов, на которые нацелена эта сборка. Допустимые названия продуктов включают: photoshop , illustrator , indesign , flash , dreamweaver , Premier , Prelude .
семейства Массив Массив строк, содержащих названия семейств продуктов, на которые нацелена эта сборка. Это может быть полезно, чтобы убедиться, что расширение работает в разных выпусках Adobe Creative Cloud. Допустимые фамилии включают: CC , CC2014 .

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

Порт хоста по умолчанию, используемый для отладки.

Чтобы поддерживать отладку расширения в нескольких продуктах одновременно, каждому поддерживаемому продукту будет назначен уникальный порт отладки:

  • Фотошоп: 8000
  • Иллюстратор: 8001
  • И т. д. Полный список см. в файле .debug.

При объединении нескольких расширений порт отладки каждого расширения будет увеличен на 100 (т. е. 8000, 8100, 8200 и т. д.)

Используется только с профилем пакета, содержит информацию, относящуюся к упаковке и распространению пакета.

Содержит информацию о сертификате, использованном для подписи расширения. У него есть два подсвойства:

  • file (String): путь к файлу сертификата. Если действительный сертификат не найден в указанном месте, автоматически создается самозаверяющий сертификат с использованием пароля, указанного ниже.
  • пароль (строка): пароль сертификата.

При упаковке пакета расширения задача пытается найти файл журнала изменений с именем текущей версии расширения ( x.x.x.txt ) в папке changelog_folder. Этот файл используется для заполнения файла шаблона update.xml, который можно использовать для поддержки автоматических обновлений вашего расширения через приложение Adobe Extension Manager CC.

  • file (String): путь к шаблону файла update.xml (см. ниже).
  • changelog_folder (String): путь к папке, содержащей файлы журнала изменений.
  • changelog_extension (String): расширение файлов журнала изменений.

Приведенный ниже пример конфигурации основан на шаблоне проекта grunt-init-cep и определяет расширение для Adobe Photoshop CC. Он регистрирует две задачи ( отладка и выпуск ), которые соответственно запускают отладку внутри Adobe Photoshop CC и упаковывают полное расширение.

Все значки и шаблоны файлов, указанные в конфигурации, доступны в шаблоне проекта (см. раздел «Начало работы»).

grunt-cep скомпилирует все файлы в папках src вместе с другими файлами расширений, установит полученное расширение и запустит Photoshop для тестирования.

Если вы хотите упаковать расширение Example, просто запустите:

и в промежуточной папке будет создан скомпилированный файл .ZXP.

Я считаю особенно полезной возможность автоматического развертывания скомпилированного расширения на веб-сайте. Этого легко добиться с помощью подключаемого модуля grunt-ftp-deploy:

При выполнении задачи развертывания задача cep:release упакует ваше расширение, а ftp-deploy загрузит соответствующие файлы (установщик ZXP и "update.xml") на веб-сайт foo.it.

Вклады крайне приветствуются! Разработка расширений для приложений Adobe — сложная тема, в которой есть множество малодокументированных функций и проблем. Не стесняйтесь сообщать о проблемах или вносить исправления в код или документацию.

Авторское право © Франческо Камарлинги, 2014

Если это не требуется применимым законодательством или не согласовано в письменной форме, программное обеспечение, распространяемое в соответствии с Лицензией, распространяется на условиях «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ ИЛИ УСЛОВИЙ, явных или подразумеваемых. См. Лицензию для конкретного языка, регулирующего разрешения и ограничения в рамках Лицензии.

На основе кода, созданного Creative Market. Включенные двоичные файлы защищены авторским правом Adobe Systems Incorporated. «Creative Suite» и «Creative Cloud» являются зарегистрированными товарными знаками Adobe Systems Incorporated.

О нас

Подключаемый модуль Grunt, который помогает отлаживать и упаковывать расширения на основе HTML5 для приложений Adobe Creative Cloud.

Подключаемый модуль Grunt, который помогает отлаживать и упаковывать расширения на основе HTML5 для приложений Adobe Creative Cloud.

С помощью этой задачи вы можете отлаживать и упаковывать расширения на основе HTML5 для продуктов Adobe® Creative Cloud® непосредственно из Grunt, полностью автоматически и без подключаемого модуля Adobe Extension Builder.

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

Он основан на инструменте командной строки csxs от Creative Market.

Журнал изменений

Начало работы

Установите плагин:

После установки плагина его можно включить в вашем Gruntfile как обычно:

Шаблон проекта

Вы можете использовать шаблон grunt-init-cep, чтобы легко начать работу. Инструмент шаблона автоматически установит все необходимые файлы и предоставит базовый шаблон расширения, уже настроенный для работы в выбранных целевых приложениях.

Пожалуйста, обратитесь к документации grunt-init-cep для получения инструкций по установке и использованию.

Расширенная настройка

Значок пакета, файлы манифеста, MXI и update.xml, предоставленные шаблоном, также можно найти в папке res/bundle, расположенной внутри папки установки плагина. При желании вы можете вручную скопировать эти файлы вместо использования шаблона grunt-init-cep.

grunt-cep настроен на использование этих файлов по умолчанию, поэтому просто скопируйте папку res/bundle в корень вашего проекта (то есть в ту же папку, что и ваш Gruntfile.js) и тебе пора идти.

Пользовательский манифест, файлы XML и MXI

Файлы шаблонов XML и MXI заполняются во время сборки с использованием свойств конфигурации. Для большинства расширений предоставленные шаблоны должны работать нормально, но для сложных расширений может потребоваться внести изменения в эти файлы или даже предоставить собственные.

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

Задача cep

Вы можете запустить задачу с помощью этой команды:

Параметры

grunt-cep имеет несколько параметров, которые можно настроить в соответствии со своими потребностями. Чтобы не загромождать ваш Gruntfile.js, рекомендуется хранить параметры во внешнем файле Javascript или JSON для более удобного редактирования и импортировать их во время выполнения, используя один из следующих способов:

Параметры, определенные во внешнем файле, при необходимости могут быть перезаписаны в дочерних задачах (см. пример ниже). Значения по умолчанию и более подробное описание всех приведенных ниже свойств можно найти в файле /options/defaults.js в папке установки плагина.

варианты

Эти свойства определяют параметры базовой задачи.

Активный профиль сборки. Допустимые свойства включают:

debug : создает расширение в режиме отладки, включая такие файлы, как .debug, для удаленной отладки расширения.

Обратите внимание: при построении с использованием профиля отладки суффикс .debug автоматически добавляется к имени и идентификатору расширения.

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

Это может быть либо папка, содержащая необработанные исходные файлы, либо результат автоматизированного процесса сборки при использовании других подключаемых модулей Grunt, таких как grunt-contrib-requirejs

options.bundle

Содержит информацию о пакете расширений, который является контейнером для всех расширений, указанных ниже. Если необходимые данные здесь не указаны, grunt-cep попытается загрузить их из первого расширения, указанного в массиве cep.extensions.

< td valign="top">Имя пакета, отображаемое в диспетчере расширений. td>
версия строка Номер версии пакета (формат: XXX ).
id Строка Уникальный идентификатор пакета (используется Creative Cloud и Extension Manager). Обычно предоставляется в виде com.developer_name.bundle_name .
name String
author_name String Автор или название компании.
mxi_icon ОбъектЗначок пакета, отображаемый в диспетчере расширений. Значок должен быть в формате PNG размером 23 x 23 пикселя.
update_url String URL-адрес, содержащий файл обновления XML с расширением и пакеты. Extension Manager проверит наличие обновлений расширения в /update.xml и автоматически загрузит обновленный пакет из /_.zxp .
description String Описание расширения для отображения в Менеджере расширений (поддерживает HTML-разметку). Это отображается только в том случае, если URL-адрес не введен в свойство description_href.
description_href String URL-адрес, указывающий на HTML-файл, содержащий описание, отображаемое в диспетчере расширений при выборе пакета расширений. Если предоставленное описание не используется.
ui_access String Описание доступа к расширению, отображаемое в Менеджере расширений (поддерживает разметку HTML).
лицензионное_соглашение String Лицензионное соглашение, отображаемое при установке расширения (поддерживает HTML).
manifest String Шаблон файла манифеста пакета, заполняемый во время выполнения информацией о пакете. Вы можете использовать один из предоставленных манифестов (например, bundle/manifest.bundle.cc.xml ) или предоставить свой собственный. Обычно это лучше указать в массиве builds, чтобы разрешить настройку для каждого продукта (см. пример ниже).
файлы Массив Начиная с 0.3.0 — Список дополнительных файлов, которые будут добавлены в комплект расширения. Это передается непосредственно в Grunt и поддерживает форматы Compact и Files Array Grunt. Дополнительную информацию см. в документации по Grunt.

options.extensions

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

Настройка жизненного цикла расширения. Содержит два свойства:

  • auto_visible (логическое значение): значение true, чтобы пользовательский интерфейс расширения автоматически отображался при запуске.
  • events (Array): массив строк, содержащих события, которые могут запускать расширение.

options.builds

Возможность указывать отдельные сборки — одна из самых мощных функций grunt-cep при работе со сложными пакетами расширений.

Свойство cep.builds представляет собой массив объектов, описывающих различные сборки, которые должны быть выполнены, каждая из которых приводит к созданию отдельного файла ZXP, который будет объединен с окончательным ZXP установщик.

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

продукты Массив массив строк, содержащих названия продуктов, на которые нацелена эта сборка. Допустимые названия продуктов включают: photoshop , illustrator , indesign , flash , dreamweaver , Premier , Prelude .
семейства Массив Массив строк, содержащих названия семейств продуктов, на которые нацелена эта сборка. Это может быть полезно, чтобы убедиться, что расширение работает в разных выпусках Adobe Creative Cloud. Допустимые фамилии включают: CC , CC2014 .

options.launch

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

Порт хоста по умолчанию, используемый для отладки.

Чтобы поддерживать отладку расширения в нескольких продуктах одновременно, каждому поддерживаемому продукту будет назначен уникальный порт отладки:

  • Фотошоп: 8000
  • Иллюстратор: 8001
  • И т. д. Полный список см. в файле .debug.

При объединении нескольких расширений порт отладки каждого расширения будет увеличен на 100 (т. е. 8000, 8100, 8200 и т. д.)

options.package

Используется только с профилем пакета, содержит информацию, относящуюся к упаковке и распространению пакета.

Содержит информацию о сертификате, использованном для подписи расширения. У него есть два подсвойства:

  • file (String): путь к файлу сертификата. Если действительный сертификат не найден в указанном месте, автоматически создается самозаверяющий сертификат с использованием пароля, указанного ниже.
  • пароль (строка): пароль сертификата.

При упаковке пакета расширения задача пытается найти файл журнала изменений с именем текущей версии расширения ( x.x.x.txt ) в папке changelog_folder. Этот файл используется для заполнения файла шаблона update.xml, который можно использовать для поддержки автоматических обновлений вашего расширения через приложение Adobe Extension Manager CC.

  • file (String): путь к шаблону файла update.xml (см. ниже).
  • changelog_folder (String): путь к папке, содержащей файлы журнала изменений.
  • changelog_extension (String): расширение файлов журнала изменений.

Примеры использования

Приведенный ниже пример конфигурации основан на шаблоне проекта grunt-init-cep и определяет расширение для Adobe Photoshop CC. Он регистрирует две задачи ( отладка и выпуск ), которые соответственно запускают отладку внутри Adobe Photoshop CC и упаковывают полное расширение.

Все значки и шаблоны файлов, указанные в конфигурации, доступны в шаблоне проекта (см. раздел «Начало работы»).

grunt-cep скомпилирует все файлы в папках src вместе с другими файлами расширений, установит полученное расширение и запустит Photoshop для тестирования.

Если вы хотите упаковать расширение Example, просто запустите:

и в промежуточной папке будет создан скомпилированный файл .ZXP.

Автоматическое развертывание

Я считаю особенно полезной возможность автоматического развертывания скомпилированного расширения на веб-сайте. Этого легко добиться с помощью подключаемого модуля grunt-ftp-deploy:

При выполнении задачи развертывания задача cep:release упакует ваше расширение, а ftp-deploy загрузит соответствующие файлы (установщик ZXP и "update.xml") на веб-сайт foo.it.

Содействие

Вклады крайне приветствуются! Разработка расширений для приложений Adobe — сложная тема, в которой есть множество малодокументированных функций и проблем. Не стесняйтесь сообщать о проблемах или вносить исправления в код или документацию.

Лицензия

Авторское право © Франческо Камарлинги, 2014

Если это не требуется применимым законодательством или не согласовано в письменной форме, программное обеспечение, распространяемое в соответствии с Лицензией, распространяется на условиях «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ ИЛИ УСЛОВИЙ, явных или подразумеваемых. См. Лицензию для конкретного языка, регулирующего разрешения и ограничения в рамках Лицензии.

Авторские права и товарные знаки

На основе кода, созданного Creative Market. Включенные двоичные файлы защищены авторским правом Adobe Systems Incorporated.«Creative Suite» и «Creative Cloud» являются зарегистрированными товарными знаками Adobe Systems Incorporated.

Читайте также: