Share
Designa e-post är svår och arkaisk. Inlining CSS, borddesign, varierande CSS-stöd, flera enheter, flera klienter, listan är oändlig. I den här handledningen ska jag förklara hur du kan använda Grunt för att automatisera och effektivisera ditt arbetsflöde.
E-postdesign är ett annat arbetsflöde för webbdesign. Ofta utformar du en mall i en isolerad miljö med liten eller ingen beroenden eller delade resurser. Du kan kopiera markup från en plats (lokal, statisk) till en annan (ESP, codebase). Det kan vara svårt att behålla dina e-postmallar, svårt att hålla dem konsekventa och besvärliga för att samarbeta med lagmedlemmar, samtidigt som du tänker på olika test och inlining som måste göras innan de skickas.
Ett problem som jag har haft tidigare är varje gång jag behövde en ny e-postmall, skulle jag ta en befintlig mall och göra några tweaks här och där. Detta skulle resultera i inkonsekventa e-postmeddelanden över produkten. Vilket är bara dålig övning.
En annan fråga som jag har stött på är att jag tror att jag är klar, så jag lägger mallen genom ett CSS inliner-verktyg och överlämnar det till en utvecklare, bara för någon att begära en ändring eller påpeka ett fel. Redigera / inline / kopiera arbetsflödet måste sedan upprepas.
Idag använder jag Grunt för att optimera mitt arbetsflöde för e-postdesign. Det hjälper till med några saker:
Grunt är en arbetslöpare. Det är en Javascript-fil som kör de uppgifter som du vill att den ska köra efter varandra. Den listan över saker du behöver göra jag nämnde just ovan? Vi kan lägga dem i en Grunt-fil och få det att göra allt för oss. Perfekt för löpande upprepade uppgifter.
För att få Grunt igång måste du få händerna lite smutsiga med kommandoradsmaterial och Javascript. Men det är väldigt rakt framåt.
Chris Coyier ger en riktigt bra handledning om att installera Grunt för första gången. Jag ska springa över grunderna.
Grunt kräver ett par saker att komma igång. Node, en pakethanterare och en gruntfil.
Gå till nodwebbplatsen och följ instruktionerna för installation.
Skapa en ny mapp (t ex kallad e-post) Skapa sedan en fil med namnet package.json.
Klistra in denna JSON i filen.
"namn": "emailDesign", "version": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"
Här berättar vi nodhanteraren för att använda Grunt, version 0.4.5 eller senare.
För att installera ovanstående version av Grunt, gå till projektets katalog i kommandoraden och skriv in:
npm installera
När du kör detta kommando märker du en node_modules mappen visas.
Fortsätt i din e-postkatalog, kör följande kommando:
npm installera -g grunt-cli
Notera: Du kan behöva förordna detta kommando med sudo om du blir ombedd att köra den som root / Administrator.
Efter att ha gjort det kan vi nu skriva in Grunt-kommandon i kommandoraden.
Skapa en fil som heter Gruntfile.js i din projektmapp och inkludera följande JavaScript:
Accentsconagua
module.exports = funktion (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ( 'default'); ;Detta är de nakna benen av vad som behövs för att Grunt ska arbeta. Nu för att lägga till fler spännande saker.
Låt oss börja med något enkelt men viktigt: Inlining CSS. Låt oss säga att vi har en e-postmall, med CSS i huvudet. CSS i huvudet är lätt (ish) att behålla, men mallen som vi faktiskt vill skicka bör ha CSS inlines.
Vi ska använda en ganska grundläggande HTML-e-post med CSS i huvudet. Spara följande markering som email.html i projektets katalog.
Hej världen!
Det här är en e-postmall.
Nästa kommer vi att använda en CSS inliner-uppgift för att placera varje stilregel inline på HTML-elementen själva. Jag gillar denna inliner eftersom det inte kräver andra beroenden. Gå tillbaka till kommandoraden och kör det här:
npm installera grunt-inline-css - save-dev
Detta kommer att lägga till grunt-inline-css-uppgiften till din npm_modules mapp, liksom package.json fil.
Lägg sedan till uppgiften i din Gruntfile.js använder det här koden, ovanför där du ser grunt.registerTask ( 'default');
grunt.loadNpmTasks ( 'grunt-inline-css');
Lägg sedan till dina konfigurationsalternativ, inom grunt.initConfig () metod:
inlinecss: main: options: , filer: 'email-inlined.html': 'email.html'
Här talar vi inlinecss för att hitta filen heter "email.html" och utdata "email-inlined.html". Slutligen kallar vi det från grunt standarduppgift:
grunt.registerTask ( 'default', [ 'inlinecss']);
Din Gruntfile borde nu se något så här:
modulen port: : 'email.html'); grunt.loadNpmTasks ( 'grunt-inline-css'); grunt.registerTask ( 'default', [ 'inlinecss']); ;
Återgå till kommandoraden igen, skriv grymta och skriv in för att köra den.
Du borde nu vara kvar med en e-inlined.html fil som har css inlined. Om du öppnar båda HTML-filerna i din webbläsare ska de se ut på samma sätt.
Med någon tur som har övertygat dig om Gruntts krafter i att automatisera ditt arbetsflöde för e-maildesign. Dessutom har efterföljande introduktion gett dig ramarna att gå ännu längre.
Vilka andra e-postdesignuppgifter kan du automatisera?
Detta är Gruntfile, som är öppet på GitHub, som jag använder ganska ofta. Låt oss ta en titt på de enskilda uppgifterna för att se vad som händer.
Jag gillar att hantera min CSS med SCSS, så det första jag får Grunt att göra är att kompilera den viktigaste SCSS-filen.
Assemble är en statisk webbplatsgenerator. Den sammanställer HTML genom att sammanföra huvudlayoutmallen och innehållet för varje e-post.
Jag använder premailer till inline CSS. Om du undrar varför jag inte använder inlinern ovanifrån, fann jag att premailer har bättre stöd för mediafrågor. För mediafrågor att arbeta vill vi att dom ska lämnas ensam i huvudet, inte inriktat.
Notera: premailer har beroenden som också måste installeras, inklusive Ruby och ett par pärlor.
För att skicka ett mail till en inkorg använder jag Mailguns API. Detta skickar utmatad HTML-e-post till min inkorg så att jag kan se den för mig själv i vilken kund jag väljer.
Det här är också ett bra sätt att skicka din mall till Litmus om du vill förhandsgranska den i andra e-postklienter. Det handlar om att ändra mottagaren.
Det här är praktiskt om du skickar transaktionsmeddelanden och behöver lagra bildtillgångar någonstans. Om du använder en ESP (Email Service Provider) för att skicka dina e-postmeddelanden finns det en bra chans att de lagrar dina bildtillgångar för dig, så det är inte ett problem i det här fallet.
För att köra uppgiften har vi ett antal kommandotillfällen.
grymta kör standarduppgiften. Detta innefattar sammansättning av Sass, monteringsmallar och inläggning av CSS. Du kan sedan öppna uppspelningen i din webbläsare.grunt send - template = MY_TEMPLATE.html kommer att köra ovanstående uppgifter, samt skicka ut e-postmallen du anger. Kom ihåg att uppdatera Mailgun-inställningarna i Gruntfile.js.grunt cdnify kommer igen att köra standarduppgifterna, men laddar också upp eventuella lokala bildtillgångar och ersätter sedan filbanorna med CDN-sökvägen.grunt cdnify send -template = MY_TEMPLATE.html Det finns fler uppgifter du kanske vill lägga till för att hjälpa din process, eller kanske du vill ta bort några. Gå vidare till Grunts plugin-katalog för att hitta de uppgifter som hjälper ditt arbetsflöde.
Här är några mallar som jag förberett tidigare.
Med hjälp av arbetsflödet och Gruntfile som beskrivits ovan öppnade jag en handfull transaktionsmeddelanden för dev-team att använda. Använd gärna dem som är eller använd dem som en panna för dina egna e-maildesigner.
Många uppgifter i samband med e-postdesign kan vara svårt och besvärligt. Låt Grunt göra det hårda arbetet för dig och du hittar hela processen mycket roligare!
