Use O Grunt Para Deixar Seu Fluxo de Criação de E-mails Legal De Novo

() translation by (you can also view the original English article)

Projetar e-mails é difícil e arcaico. Criar CSS em linha, uso de tabelas, suporte bem complicado para o CSS, diversos dispositivos... A lista é bem grande. Nesse tutorial, explicarei como você pode usar o Grunt para ajudá-lo a automatizar e agilizar seu fluxo de trabalho.

Fluxo de Trabalho de Criação de E-mails é Falho

Criação de e-mails requer um fluxo diferente do design para web. Geralmente, você projeta um modelo em um ambiente isolado, com poucas ou sem dependências ou recursos compartilhados. Talvez copie algum trecho de HTML de um lugar (local, estático) para outro (Provedor de Serviços de E-mail, base do trabalho). Pode ser difícil manter seus modelos de e-mails consistentes e até estranho em colaborar com membros da equipe, sem esquecer dos vários testes e da necessidade de colocar o CSS em linha, antes que os e-mails sejam enviados.

Um problema que tive no passado foi que, toda vez que precisei de um novo modelo de e-mail, tive de pegar um modelo existente e fazer algumas mudanças aqui e acolá. Isso resultava em e-mails inconsistentes entre os produtos da empresa, que, convenhamos, é uma péssima prática.

Outro problema que tive de lidar é achar que já tinha terminado o trabalho, precisando só passar o modelo por uma ferramenta de inserção de CSS em linha, para enviar para o desenvolvedor. Tudo isso só para, depois, alguém requisitar uma mudança ou apontar algum erro. O processo de editar/inserir/copiar tinha de se repetir de novo e mais uma vez.

O Grunt Ao Resgate

Hoje em dia, uso o Grunt para otimizar meu fluxo de criação de e-mails. Ele ajuda em algumas coisas:

Provê uma framework a partir da qual posso trabalhar, podendo usar o Sass e modelos
Serve como código base para novos e-mails
Ajuda a criar e-mails mais consistentes entre os projetos
Automatiza as várias tarefas e testes que tenho de realizar para cada e-mail

O Que É O Grunt?

Grunt é um executador de tarefas. É um arquivo JavaScript que executa as tarefas que você quer rodar uma atrás da outra. Sabe a lista de coisas que coloquei logo aqui acima: Podemos colocá-la em um arquivo do Grunt e fazê-lo executá-la por nós. Perfeito para executar tarefas repetitivas.

Para deixar o Grunt pronto para funcionar, você precisará por as mãos na massa, indo à linha de comando e mexer com um pouco de JavaScript. Fora isso, é tudo muito direto.

1. Como Deixar o Grunt Pronto Para Uso

Chris Coyier tem um tutorial muito bom sobre como preparar e configurar o Grunt pela primeira vez. Falarei sobre o básico.

O Grunt tem alguns requisitos para funcionar. São eles: Node, um administrador de pacotes e um arquivo grunt.

Instalação do Node

Vá até o site do Node e siga as instruções para a instalação.

Crie um arquivo `package.json` no diretório do seu projeto

Crie um novo diretório (chamado email, por exemplo) e crie um arquivo package.json.

Cole esse código JSON no arquivo recém criado.

{
  "name": "emailDesign",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5"
  }
}

Aqui, dizemos ao administrador de pacotes do Node que usaremos o Grunt, a partir da versão 0.4.5 ou mais nova.

Instalação do NPM

Agora, para instalar a versão mencionada acima (ou mais recente), vá até o diretório do seu projeto e, a partir da linha de comando, e digite:

1	npm install

Quando você executar esse comando, perceberá que uma pasta node_modules aparecerá.

Instalando a Interface de Linha de Comando do Grunt

Ainda no diretório do seu e-mail, execute o comando a seguir:

1	npm install -g grunt-cli

Nota: talvez precise iniciar esse comando com um outro comando, o sudo, no caso de ser pedido para executar o comando como root/Administrador.

Tendo feito isso, podemos digitar comandos do Grunt na linha de comando.

Criando Seu Arquivo Gruntfile.js

Crie um arquivo chamado Gruntfile.js no diretório do seu projeto e inclua o código abaixo:

module.exports = function(grunt) {

    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json')
    });

    grunt.registerTask('default');

};

Esse é o mínimo que é preciso para o Grunt funcionar. Agora, adicionaremos algo mais interessante.

2. Adicionando Tarefas do Grunt

Comecemos com algo simples, mas vital: Embutir CSS em linha. Digamos que temos um modelo de e-mail, com CSS no elemento head. O CSS estando lá, fica fácil (de certa forma) a manutenção, mas o modelo que queremos enviar precisa do CSS em linha.

Criando o HTML do Modelo

Usaremos um código HTML relativamente básico com um CSS no elemento head. Salve o código abaixo como email.html no diretório do seu projeto.

<html>
<head>
  <style>
  body{
    background:#f1f1f1;
    font-family: Helvetica;
  }
  .container{
    background:#fff;
    border:1px solid #eee;
    width:500px;
    padding:20px;
    margin:20px auto;
  }
  h1{
    font-size:32px;
    text-align:center;
    font-weight:400;
  }
  </style>
</head>

<body>
  <div class="container">
    <h1>Olá Mundo!</h1>
    <p>Isso é um modelo de e-mail.</p>
  </div>
</body>
</html>

Instalando o Embutidor de CSS

Agora, criaremos uma tarefa para o embutidor de CSS em linha, para que ele possa embutir cada regra de estilo nos elementos em si. Eu gosto desse embutidor, uma vez que ele não tem outras dependências. Volte à linha de comando e execute:

1	npm install grunt-inline-css --save-dev

Isso adicionará uma pasta grunt-inline-css em seu diretório npm_modules, assim como no arquivo package.json.

Adicione a Tarefa ao Seu Arquivo Gruntfile

Agora, adicione a tarefa em seu arquivo Gruntfile.js usando o trecho de código abaixo, logo antes de grunt.registerTask('default');

1	grunt.loadNpmTasks('grunt-inline-css');

Depois, adicione em suas opções de configuração, dentro do método grunt.initConfig() method:

inlinecss: {
    main: {
        options: {},
        files: {
            'email-inlined.html': 'email.html'
        }
    }
}

Aqui, dizemos ao inlinecss para encontrar o arquivo “email.html” e criar o arquivo “email-inlined.html”. Finalmente, chamamos ele a partir da tarefa padrão do Grunt:

1	grunt.registerTask('default',['inlinecss']);

O Arquivo Gruntfile Final

Seu arquivo Gruntfile deveria parecer mais ou menos com isso:

module.exports = function(grunt) {

    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),

      inlinecss: {
        main: {
          options: {
          },
          files: {
            'email-inlined.html': 'email.html'
          }
        }
      }

    });

    grunt.loadNpmTasks('grunt-inline-css');

    grunt.registerTask('default',['inlinecss']);

};

Execute o Grunt

Voltando, mais uma vez, para a linha de comando, digite grunt e pressione o enter para executá-lo.

Você deveria, agora, ter um arquivo “email-inlined.html” com o CSS em linha. Se abrir ambos os arquivos HTML em seu navegador, eles parecerão idênticos.

Tarefas da Criação de E-mails

Com sorte, isso deve ter convencido você dos poderes que o Grunt provê na automatização do seu fluxo de criação de e-mails. Além disso, ao seguir essa breve introdução, você tem a base para seguir mais a fundo.

Que outras tarefas de criação de e-mail podem ser automatizadas?

Compilação de CSS (caso use SASS ou Less)
Embutidura de CSS em linha
Compilação de Modelos HTML (se estiver usando modelos e sub-seções)
Pré-visualização em Navegadores
Pré-visualização em Clientes de E-mail
Testes com Aplicativos para Testes de E-mails (por exemplo: Litmus ou Email on Acid)
Envio de Arquivos de Imagem, CSS, JavaScript, etc para uma CDN pública
Adição de Tags de Rastreamento em Links
…e muito mais

Meu Arquivo Gruntfile Para Criação de E-mails

Esse é o arquivo Gruntfile, disponível no GitHub, que uso frequentemente. Vejamos as tarefas, uma por uma, para saber o que ele faz realmente.

1. Sass/SCSS

Gosto de trabalhar com CSS usando SCSS, assim, a primeira coisa que faço é dizer ao Grunt para compilar o arquivo SCSS principal.

2. Montagem do HTML

Assemble é um gerador de sites estáticos. Ele compila o HTML juntando as diferentes partes do modelo do layout, unindo com o conteúdo de cada e-mail.

3. Embutidura do CSS

Uso o premailer para embutir CSS. Se você está a se perguntar o porque de não usar o embutidor mencionado no artigo, é porque o premailer oferece um suporte maior e melhor a media queries. Para as media queries funcionarem, queremos que elas fiquem no elemento head ao invés de emutidos.

Nota: o premailer possui suas próprias dependências que precisam ser instaladas, incluindo a linguagem Ruby e algumas gems.

4. Envio de E-mails Testes

Para enviar um e-mail, tenho usado a API do Mailgun. Ela envia o HTML gerado para minha caixa de entrada, de modo que eu possa ver, com meus próprios olhos, no cliente que eu escolher.

Essa também é uma forma útil de enviar seu modelo para o Litmus caso queira visualizar em outros clientes de e-mail. Para isso, é só questão de mudar o destinatário.

5. CDN

Isso é bem útil se estiver enviando e-mails transacionais e precisar guardar seus recursos de imagens em lugares diferentes. Se estiver usando algum Provedor de Serviços de E-mail para enviar seus e-mails, há uma grande chance que eles já estejam guardando seus arquivos para você, assim, não é tão problemático nesse caso.

Executando as Tarefas

Para executar as tarefas, temos diversas opções de comandos.

O comando grunt executa a tarefa padrão. Isso inclue a compilação do Sass, montagem dos modelos e embutidura do CSS. Você pode, então, abrir o resultado em seu navegador.
O comando grunt send --template=MY_TEMPLATE.html executará as tarefas acima, bem como enviará o email modelo que você especificar. Lembre-se de atualizar as configurações do Mailgun em seu Gruntfile.js.
O comando grunt cdnify, novamente, executará as tarefas padrão, mas, também enviará os recursos locais para um CDN e substituirá os endereços pelos caminhos relativos à CDN.
Perceba que você também pode combinar tarefas. Por exemplo grunt cdnify send —template=MY_TEMPLATE.html

Mais tarefas!

Há muito mais tarefas que você talvez queira adicionar em seu processo. Talvez queira, quem sabe, remover algumas. Vá até o diretório de plugins do Grunt para descobrir outras tarefas que podem auxiliar em seu fluxo de trabalho.

Modelos de E-mail Transacionais

Eis alguns modelos que deixei preparado.

Usando o fluxo acima, bem como o arquivo Gruntfile mencionado, disponibilizei alguns modelos de emails transacionais como código aberto, para equipes de desenvolvimento usarem. Sinta-se livre para utilizá-los como estão ou como base para seus próprios projetos de e-mail.

Recursos Úteis Sobre Criação de E-mails

Conclusão

Muitas tarefas associadas a criação de e-mails podem ser tortuosas. Deixe o Grunt realizar o trabalho pesado por você e verá como esse processo se tornará muito mais agradável!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!