Мой текущий рабочий процесс разработки электронной почты в формате HTML

Быстрое тестирование с Gulp

Я много исследовал сценарии Gulp или Grunt для автоматизации заключительных этапов нашего рабочего процесса. npm предлагает множество решений, но в итоге я выбрал пакет Gulp Email Builder . Этот пакет представляет собой версию Gulp более крупного проекта , и, если хотите, он также имеет версию Grunt.

Email Builder позволяет вставлять или встраивать CSS-файлы, выполнять тесты с использованием API Litmus и отправлять дополнительные электронные письма для тестирования.

Чтобы использовать Email Builder, вам, конечно же, нужно установить Gulp. Я только что написал об этом в своей статье «Настройка значков начальной загрузки с использованием статьи Gulp» , так что вы можете обратиться к ней за помощью. Кроме того, вы можете прочитать статью Этьена Марграффа о рабочих процессах Gulp и Grunt .

Помимо Email Builder, мы будем использовать пакет Gulp-Replace , поэтому вам необходимо установить и его.

Как и в случае с любой задачей Gulp, нам нужно настроить gulpfile.js :

 var gulp = require('gulp'), emailBuilder = require('gulp-email-builder'), replace = require('gulp-replace'); var current_date = new Date().toString(), email_subject = 'Food Service', remote_imgs_basepath = 'http://mydomain.com/path/to/remote/imgs/', email_builder_options = { encodeSpecialChars: true, emailTest : { // Your Email email : '[email protected],' + '[email protected],' + '[email protected]', // Your email Subject subject : email_subject + ' [' + current_date + ']', // Optional transport: { type: 'SMTP', options: { service: 'gmail', auth: { user: '[email protected]', pass: 'my_password' } } } }, litmus : { username : 'Litmus_username', password : 'litmus_password', // Url to your Litmus account url : 'https://myaccount.litmus.com', // Optional, defaults to title of email or yyyy-mm-dd if <title> and options.subject not set subject : email_subject, // Email clients to test for. Find them at https://litmus.com/emails/clients.xml // and use the `application_code` field applications : ['androidgmailapp','gmailnew', 'iphone5s'] } }; gulp.task('default', function() { gulp.src(['./explore_and_taste.html']) .pipe(replace(/src="imgs\//g, 'src="' + remote_imgs_basepath)) .pipe(emailBuilder(email_builder_options)) .pipe(gulp.dest('./ready_to_send')); }); 

Сначала мы включаем все нужные нам пакеты и устанавливаем четыре переменные:

• current_date — строка, представляющая текущую дату; мы будем использовать его для дифференциации строк темы тестирования электронной почты, чтобы было легче различать разные версии.
• email_subject
• remote_imgs_basepath — это URL-адрес удаленной папки, содержащей наше изображение. Я использую это для выполнения локального теста, устанавливая относительный путь для изображений (таким образом, я могу легко внести все необходимые изменения), но для окончательных тестов (и задачи отправки) требуется, чтобы изображения загружались в удаленную папку таким образом я изменяю все атрибуты src с помощью remote_imgs_basepath используя Gulp Replace
• email_builder_options — это объект для настройки Email Builder

В этом примере объект email_builder_options имеет три элемента, вы можете проверить страницу ядра электронной почты для полного списка всех доступных опций.

Первый элемент, encodeSpecialChars , гарантирует, что все специальные символы закодированы в их HTML-форме.

Элемент emailTest используется для настройки тестирования электронной почты. Требуются некоторые параметры:

• email : адреса email через запятую, на которые мы отправляем тестовое письмо. У меня есть учетная запись для каждой почтовой службы, которую нужно протестировать (Gmail, Outlook, Yahoo и т. Д.), Чтобы быстро проверить их как на странице веб-почты, так и в мобильных приложениях.
• subject : тема письма (обратите внимание, что я добавил переменную current_date чтобы быстро узнать, с какой версией я имею дело).
• transport : параметры, необходимые отправителю для выполнения этой задачи

Если вы используете GMail в качестве параметра транспорта, вам необходимо активировать «Разрешить менее безопасные приложения» в настройках своей учетной записи Google, в противном случае задача отправки будет неудачной (лучше всего, если вы не используете свою личную учетную запись для этого):

Третий параметр позволяет настроить тест на платформе Litmus (конечно, вам нужна учетная запись Litmus). Вы должны указать параметры своей учетной записи, необязательную тему (она будет использоваться для группировки тестов, если вы будете выполнять их более одного раза), а также список почтовых клиентов, подлежащих тестированию.

Чтобы добавить клиента, вы должны использовать его тестовый код приложения . Вы можете получить это из поля application_code файла https://litmus.com/emails/clients.xml (обратите внимание, что вы должны войти в систему, чтобы получить доступ к этому файлу).

 applications : ['androidgmailapp','gmailnew', 'iphone5s']