Share
Designe e-post er vanskelig og arkaisk. Inlining CSS, borddesign, varierende CSS-støtte, flere enheter, flere klienter, listen er uendelig. I denne veiledningen vil jeg forklare hvordan du kan bruke Grunt for å automatisere og effektivisere arbeidsflyten din.
E-postdesign er en annen arbeidsflyt for webdesign. Ofte designer du en mal i et isolert miljø, med lite eller ingen avhengigheter eller delte ressurser. Du kan kopiere markering fra ett sted (lokal, statisk) til en annen (ESP, kodebase). Det kan være vanskelig å opprettholde e-postmallene dine, vanskelig å holde dem konsekvente og vanskelig å samarbeide med gruppemedlemmer, alt mens du husker de ulike testene og innsatsen som må gjøres før de blir sendt.
Et problem jeg har hatt tidligere er hver gang jeg trengte en ny e-postmal, ville jeg ta en eksisterende mal og deretter lage noen tweaks her og der. Dette vil resultere i inkonsekvent e-post på tvers av produktet. Det er bare dårlig praksis.
Et annet problem jeg har kommet over er at jeg tror jeg er ferdig, så jeg legger mal gjennom et CSS inliner-verktøy og overleverer det til en utvikler, bare for noen å be om en endring, eller påpeke en feil. Rediger / inline / copy-arbeidsflyten må deretter gjentas igjen og igjen.
I dag bruker jeg Grunt for å optimalisere e-postdesign arbeidsflyten. Det hjelper med noen få ting:
Grunt er en oppgaveløper. Det er en Javascript-fil som kjører oppgavene du vil at den skal kjøre en etter en. Den listen over ting du trenger å gjøre, har jeg nettopp nevnt ovenfor? Vi kan sette dem inn i en Grunt-fil og få den til å gjøre alle de for oss. Perfekt for løpende repeterende oppgaver.
For å få Grunt oppe, må du få hendene litt skitne med kommandolinjepost og Javascript. Men det er veldig rett fram.
Chris Coyier gir en veldig god opplæring om å sette opp Grunt for første gang. Jeg skal løpe over det grunnleggende.
Grunt krever et par ting å komme i gang. Node, en pakkebehandling og en grunt-fil.
Gå til Node-siden og følg instruksjonene for å installere.
Opprett en ny mappe (for eksempel kalt e-post) Opprett deretter en fil som heter package.json.
Lim inn denne JSON inn i filen.
"navn": "emailDesign", "versjon": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"
Her forteller vi nodepakkenes leder å bruke Grunt, versjon 0.4.5 eller nyere.
Nå for å installere den ovennevnte versjonen av Grunt, gå til prosjektets katalog i kommandolinjen og skriv inn:
npm installasjon
Når du kjører denne kommandoen, vil du legge merke til en node_modules mappen vises.
Fortsett i e-postkatalogen din, kjør følgende kommando:
npm installere -g grunt-cli
Merk: Du må kanskje prepend denne kommandoen med sudo hvis du blir bedt om å kjøre den som root / administrator.
Etter å ha gjort det, kan vi nå skrive Grunt-kommandoer inn i kommandolinjen.
Opprett en fil som heter Gruntfile.js i prosjektmappen din og ta med følgende JavaScript:
Accentsconagua
module.exports = funksjon (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ( 'standard'); ;Dette er de bare beinene av hva som trengs for Grunt å jobbe. Nå for å legge til flere spennende ting.
La oss starte med noe enkelt, men viktig: Inlining CSS. La oss si at vi har en e-postmal, med CSS i hodet. CSS i hodet er enkelt (ish) å opprettholde, men malen vi faktisk vil sende bør ha CSS inlined.
Vi skal bruke en ganske grunnleggende HTML-e-post med CSS i hodet. Lagre følgende oppføring som email.html i prosjektets katalog.
Hei Verden!
Dette er en e-postmal.
Deretter skal vi bruke en CSS inliner-oppgave for å plassere hver stilregel inline på HTML-elementene selv. Jeg liker denne inliner som det ikke krever andre avhengigheter. Gå tilbake til kommandolinjen og kjør dette:
npm installer grunt-inline-css - save-dev
Dette vil legge til grunt-inline-css-oppgaven til din npm_modules mappe, så vel som package.json fil.
Deretter legger du oppgaven til din Gruntfile.js bruker denne koden, over hvor du ser grunt.registerTask ( 'standard');
grunt.loadNpmTasks ( 'grov-inline-css');
Deretter legger du til konfigurasjonsalternativene dine, innenfor grunt.initConfig () metode:
inlinecss: main: options: , filer: 'email-inlined.html': 'email.html'
Her forteller vi inlinecss å finne filen som heter "email.html" og utdata "email-inlined.html". Til slutt, vi kaller det fra grunt standard oppgave:
grunt.registerTask ( 'standard', [ 'inlinecss']);
Gruntfile skal nå se slik ut:
module.exports = funksjon (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), inlinecss: main: options: , filer: 'email-inlined.html' : 'email.html'); grunt.loadNpmTasks ( 'grov-inline-css'); grunt.registerTask ( 'standard', [ 'inlinecss']); ;Går tilbake til kommandolinjen, skriv inn grynte og skriv inn for å kjøre den.
Du bør nå være igjen med en e-inlined.html fil som har css inlined. Hvis du åpner begge HTML-filene i nettleseren din, bør de se det samme.
Med noe flaks som vil ha overbevist deg om Gruntts krefter i å automatisere din e-postdesign arbeidsflyt. I tillegg har denne introduksjonen gitt deg rammen for å gå enda lenger.
Hvilke andre e-postdesignoppgaver kan du automatisere?
Dette er Gruntfile, som er åpen på GitHub, som jeg bruker ganske ofte. La oss ta en titt på de enkelte oppgavene for å se hva som skjer.
Jeg liker å administrere CSS ved hjelp av SCSS, så det første jeg får Grunt å gjøre er å kompilere hoved SCSS-filen.
Assemble er en statisk nettsted generator. Den kompilerer HTML ved å samle hovedlayoutmalen (e) og innholdet for hver e-post.
Jeg bruker premailer til inline CSS. Hvis du lurer på hvorfor jeg ikke bruker inlineren ovenfra, fant jeg ut at premailer har bedre støtte for medieforespørsler. For media spørsmål til arbeid, vil vi at de skal stå alene i hodet, ikke innstilt.
Merk: premailer har avhengigheter som også må installeres, inkludert Ruby og et par edelstener.
For å sende en epost til en innboks bruker jeg Mailgun API. Dette sender utgående HTML-e-post til innboksen min, så jeg kan se den for meg selv i hvilken klient jeg velger.
Dette er også en nyttig måte å sende malen din til Litmus hvis du vil forhåndsvise den i andre e-postklienter. Å gjøre det er et spørsmål om å endre mottakeren.
Dette er nyttig hvis du sender transaksjonelle e-postadresser og trenger å lagre bildeaktiver et sted. Hvis du bruker en ESP (e-postleverandør) for å sende e-postene dine, er det en god sjanse for at de lagrer bildegenskapene for deg, så det er ikke et problem i dette tilfellet.
For å kjøre oppgavene har vi en rekke kommandoalternativer.
grynte kjører standardoppgaven. Dette inkluderer kompilering av Sass, monteringsmaler og inlining av CSS. Du kan deretter åpne utgangen i nettleseren din.grunt send --template = MY_TEMPLATE.html vil kjøre oppgavene ovenfor, samt sende ut e-postmalen du angir. Husk å oppdatere Mailgun-innstillingene i Gruntfile.js.grunt cdnify Vil igjen kjøre standardoppgaver, men vil også laste opp eventuelle lokale bildeaktiver, og deretter erstatte filbanene med CDN-banen.grunt cdnify send -template = MY_TEMPLATE.html Det er flere oppgaver du kanskje vil legge til for å hjelpe prosessen din, eller du vil kanskje fjerne noen. Gå over til Grunts plugin-katalog for å finne oppgavene som hjelper arbeidsflyten din.
Her er noen maler jeg har utarbeidet tidligere.
Ved å bruke arbeidsflyten og Gruntfile skissert ovenfor, åpnet jeg en håndfull transaksjonsmessige e-postadresser for dev-lag som skal brukes. Du kan gjerne bruke dem som det er, eller bruke dem som en kjele for dine egne e-postdesign.
Mange oppgaver knyttet til e-postdesign kan være vanskelig og vanskelig. La Grunt gjøre det harde arbeidet for deg, og du vil finne hele prosessen mye morsommere!
