Share
Concevoir un courrier électronique est difficile et archaïque. Inlining CSS, design de tableau, support CSS variable, plusieurs périphériques, plusieurs clients, la liste est infinie. Dans ce tutoriel, nous expliquerons comment utiliser Grunt pour automatiser et rationaliser votre flux de travail..
La conception de courrier électronique est un flux de travail différent de la conception Web. Vous concevez souvent un modèle dans un environnement isolé, avec peu ou pas de dépendances ou de ressources partagées. Vous êtes peut-être en train de copier un balisage d'un endroit (local, statique) vers un autre (ESP, base de code). Il peut être difficile de gérer vos modèles de courrier électronique, de les maintenir cohérents et difficiles à collaborer avec les membres de l'équipe, tout en gardant à l'esprit les différents tests et procédures en ligne à effectuer avant leur envoi..
Un problème que j’ai eu par le passé est que chaque fois que j’avais besoin d’un nouveau modèle de courrier électronique, je prenais un modèle existant, puis apportais quelques modifications ici et là. Cela entraînerait des courriels incohérents dans l'ensemble du produit. Ce qui est juste une mauvaise pratique.
Un autre problème que j'ai rencontré est que je pense avoir terminé. J'ai donc placé le modèle dans un outil inliner CSS et le remis à un développeur, uniquement pour permettre à quelqu'un de demander une modification ou de signaler une erreur. Le flux de travail édition / en ligne / copie doit ensuite être répété encore et encore.
De nos jours, j'utilise Grunt pour optimiser mon flux de travail de conception d'email. Cela aide avec quelques choses:
Grunt est un coureur de tâches. C'est un fichier Javascript qui exécute les tâches que vous souhaitez exécuter les unes après les autres. Cette liste de choses que vous devez faire, je viens de mentionner ci-dessus? Nous pouvons les mettre dans un fichier Grunt et le laisser faire tout cela pour nous. Parfait pour exécuter des tâches répétitives.
Pour que Grunt soit opérationnel, vous devez vous salir les mains avec des commandes en ligne de commande et Javascript. Mais c'est très simple.
Chris Coyier donne un très bon tutoriel sur la configuration de Grunt pour la première fois. Je vais courir sur les bases.
Grunt nécessite deux choses pour y aller. Node, un gestionnaire de paquets et un fichier grunt.
Allez sur le site Node et suivez les instructions pour installer.
Créez un nouveau dossier (appelé par exemple email) puis créez un fichier nommé package.json.
Coller ce JSON dans le fichier.
"name": "emailDesign", "version": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"
Ici, nous demandons au gestionnaire de package de noeud d'utiliser Grunt, version 0.4.5 ou ultérieure..
Maintenant, pour installer la version ci-dessus de Grunt, allez dans le répertoire de votre projet en ligne de commande et entrez:
npm installer
Lorsque vous exécutez cette commande, vous remarquerez une node_modules dossier apparaît.
Toujours dans votre répertoire de messagerie, exécutez la commande suivante:
npm installer -g grunt-cli
Remarque: vous devrez peut-être ajouter cette commande à sudo si vous êtes invité à l'exécuter en tant que root / administrateur.
Ceci fait, nous pouvons maintenant taper des commandes Grunt dans la ligne de commande.
Créez un fichier appelé Gruntfile.js dans votre dossier de projet et inclure le code JavaScript suivant:
Accentsconagua
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default'); ;C’est tout ce dont nous avons besoin pour que Grunt fonctionne. Maintenant, pour ajouter des choses plus excitantes.
Commençons par quelque chose de simple, mais vital: CSS en ligne. Disons que nous avons un modèle de courrier électronique, avec CSS dans la tête. CSS dans la tête est facile (ish) à maintenir, mais le modèle que nous voulons réellement envoyer devrait avoir CSS en ligne.
Nous allons utiliser un email HTML assez basique avec le CSS en tête. Enregistrez le balisage suivant sous le nom email.html dans le répertoire de votre projet..
Bonjour le monde!
Ceci est un modèle de courrier électronique.
Ensuite, nous allons utiliser une tâche inliner CSS pour placer chaque règle de style en ligne sur les éléments HTML eux-mêmes. J'aime cet inliner car il ne nécessite pas d'autres dépendances. Retournez à votre ligne de commande et lancez ceci:
npm installer grunt-inline-css --save-dev
Cela ajoutera la tâche grunt-inline-css à votre npm_modules dossier, ainsi que le package.json fichier.
Ensuite, ajoutez la tâche à votre Gruntfile.js en utilisant cet extrait, ci-dessus où vous voyez grunt.registerTask ('default');
grunt.loadNpmTasks ('grunt-inline-css');Puis ajoutez dans vos options de configuration, dans le grunt.initConfig () méthode:
inlinecss: main: options: , fichiers: 'email-inlined.html': 'email.html'
Ici, nous demandons à inlinecss de trouver le fichier nommé "email.html" et de générer "email-inlined.html". Enfin, nous l'appelons de la tâche par défaut grunt:
grunt.registerTask ('default', ['inlinecss']);Votre Gruntfile devrait maintenant ressembler à ceci:
module.exports = fonction (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')), inlinecss: main: options: , fichiers: 'email-inlined.html' : 'email.html'); grunt.loadNpmTasks ('grunt-inline-css'); grunt.registerTask ('default', ['inlinecss']); ;Pour revenir à la ligne de commande, tapez grognement et entrez pour l'exécuter.
Vous devriez maintenant être laissé avec un email-inlined.html fichier qui a le css en ligne. Si vous ouvrez les deux fichiers HTML dans votre navigateur, ils doivent être identiques..
Avec un peu de chance, cela vous aura convaincu des pouvoirs de Grunt pour automatiser votre flux de travail de conception d’e-mails. De plus, la suite de cette introduction vous a donné le cadre pour aller encore plus loin.
Quelles autres tâches de conception de courrier électronique pourriez-vous automatiser??
C’est le fichier Gruntfile, en libre accès sur GitHub, que j’utilise assez souvent. Jetons un coup d'oeil aux tâches individuelles pour voir ce qui se passe réellement.
J'aime gérer mes CSS avec SCSS. La première chose à faire pour Grunt est donc de compiler le fichier SCSS principal..
Assemble est un générateur de site statique. Il compile le code HTML en réunissant le ou les principaux modèles de mise en page et le contenu de chaque email..
J'utilise premailer pour CSS en ligne. Si vous vous demandez pourquoi je n'utilise pas l'inliner ci-dessus, j'ai constaté que Premailer supporte mieux les requêtes multimédia. Pour que les requêtes des médias fonctionnent, nous voulons qu'elles restent seules dans la tête et non en ligne..
Remarque: premailer a des dépendances qui doivent également être installées, y compris Ruby et quelques gemmes.
Pour envoyer un email à une boîte de réception, j'utilise l'API de Mailgun. Cela envoie le courrier électronique HTML généré dans ma boîte de réception afin que je puisse le voir moi-même, quel que soit le client choisi..
C'est également un moyen utile d'envoyer votre modèle à Litmus si vous souhaitez le prévisualiser dans d'autres clients de messagerie. Il s’agit de changer le destinataire.
C'est pratique si vous envoyez des courriels transactionnels et que vous devez stocker des ressources d'image quelque part. Si vous utilisez un fournisseur de service de courrier électronique (ESP) pour envoyer vos courriels, il est fort probable qu'ils stockent vos images, ce n'est donc pas un problème dans ce cas..
Pour exécuter les tâches, nous avons plusieurs options de commande..
grognement exécute la tâche par défaut. Cela comprend la compilation de Sass, l'assemblage de modèles et l'intégration du CSS. Vous pouvez ensuite ouvrir la sortie dans votre navigateur.Grunt Send --template = MY_TEMPLATE.html exécute les tâches ci-dessus, ainsi que l'envoi du modèle de courrier électronique que vous spécifiez. N'oubliez pas de mettre à jour les paramètres Mailgun dans Gruntfile.js.grognement cdnify exécutera à nouveau les tâches par défaut, mais téléchargera également tous les éléments d'image locaux, puis remplacera les chemins de fichiers par le chemin du CDN.grunt cdnify send -template = MY_TEMPLATE.html Vous voudrez peut-être ajouter d'autres tâches pour faciliter votre processus ou vous pouvez en supprimer certaines. Rendez-vous dans le répertoire des plug-ins de Grunt pour trouver les tâches qui aident votre flux de travail.
Voici quelques modèles que j'ai préparés plus tôt.
En utilisant le flux de travail et le fichier Gruntfile décrits ci-dessus, j'ai ouvert à l’origine une poignée de courriers électroniques transactionnels à l’usage des équipes de développement. N'hésitez pas à les utiliser tels quels, ou à les utiliser comme passe-partout pour vos propres designs de courrier électronique.
De nombreuses tâches associées à la conception des e-mails peuvent être ardues et difficiles. Laissez Grunt faire le travail dur pour vous et vous trouverez le processus beaucoup plus agréable.!
