Сборка для верстки адаптивных email писем

Как известно, верстка email-писем, в особенности адаптивных, не самое приятное, чем приходится заниматься верстальщику. К счастью, есть инструменты, способные неплохо облегчить данную задачу. В этом посте речь пойдет о том, как сделать Gulp сборку с использованием email фреймворка MJML, благодаря которому работу над email письмами можно сделать достаточно комфортной.

Старт

Создадим папку и инициализируем проект в консоли:

mkdir email-starter && cd "$_"
yarn init -y
git init

Я использую менеджер пакетов Yarn, не забудьте установить, если он у вас не установлен, либо используйте npm.

Дополнительно я инициализировал Git, чтобы выложить свою сборку на Github.

Также я создам файл .gitignore, чтобы исключить некоторые файлы и директории из Git’а:

touch .gitignore && subl.exe "$_"

В файл вносим следующие строки:

.gitignore
node_modules/
*.log

Далее установим необходимые зависимости для проекта:

yarn add babel-core babel-preset-env del gulp gulp-mjml gulp-webserver -D

Создадим файл .babelrc и добавим:

{
  "presets": ["env"]
}

Отлично, теперь добавим файл gulpfile.babel.js для написания тасков Gulp’а:

touch gulpfile.babel.js && subl.exe "$_"

Мои таски для данной сборки:

'use strict';

import gulp from 'gulp';
import server from 'gulp-webserver';
import mjml from 'gulp-mjml';
import del from 'del';

const paths = {
  src: './src',
  dist: './dist',
};

// Tasks

gulp.task('clean', (cb) => del([`${ paths.dist }/*`], cb));

gulp.task('copy', () => {
  return gulp.src([`!${ paths.src }/*.mjml`, `${ paths.src }/**`, ])
    .pipe(gulp.dest(paths.dist));
});

gulp.task('webserver', ['build'], () => {
  gulp.src(paths.dist)
    .pipe(server({
      livereload: true,
      directoryListing: {
        enable: true,
        path: 'dist',
      },
      open: true
    }));
});

gulp.task('mjml', () => {
  return gulp.src(`${ paths.src }/*.mjml`)
    .pipe(mjml())
    .pipe(gulp.dest(paths.dist))
});

gulp.task('build', ['clean', 'copy', 'mjml']);

gulp.task('watch', ['webserver'], () => {
  gulp.watch(`${ paths.src }/**.*`, ['clean', 'copy']);
  gulp.watch(`${ paths.src }/*.mjml`, ['mjml']);
});

gulp.task('default', ['clean', 'copy', 'watch']);

И создадим две директории для исходников и конечного кода:

mkdir src dist

В папке src создадим файл index.mjml. Синтаксис MJML очень похож на обычный HTML, примеры разметки есть в неплохой документации, также можно поиграться в онлайн редакторе.

Давайте накидаем заготовку для будущих писем:

<mjml>
  <mj-head>
    <mj-title>Email Starter</mj-title>

    <mj-attributes>
      <mj-all font-family="Arial" font-size="16px" />
    </mj-attributes>

    <mj-style>
      .email-header {
        background: #eee;
        text-transform: uppercase;
      }

      .email-footer {
        background: #eee;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <!-- HEADER -->
      <mj-section css-class="email-header">
        <mj-text>Header</mj-text>
      </mj-section>
      <!-- /HEADER -->

      <!-- CONTENT -->
      <mj-section css-class="email-content">
        <mj-text>Content</mj-text>
      </mj-section>
      <!-- /CONTENT -->

      <!-- FOOTER -->
      <mj-section css-class="email-footer">
        <mj-text>Footer</mj-text>
      </mj-section>
      <!-- /FOOTER -->
    </mj-container>
  </mj-body>
</mjml>

Запустите в консоли команду gulp и перейдите по адресу http://localhost:8000 (порт 8000 по умолчанию). Если все сделано верно, то вы увидите нашу email заготовку. Изменения в файле будут пересобирать нашу сборку. Зайдите в dist, откройте файл index.html, чтобы увидеть полученный html код.
Исходники на Github.

Помощь проекту

Если вам нравится проект и вы хотите его поддержать, то можете сделать небольшое пожертвование, оставить комментарий, оценить статью или поделиться материалом в соц. сети. Вот так все просто. От вашей поддержки зависит дальнейшее развитие.

Рейтинг статьи

Похожие статьи

Комментариев пока нет.