yarn setup
Installs node modules, builds an email, then runs yarn dev - First load might require a page refresh
yarn dev - Start the framework
Create email templates in ./src/templates/*.html include partials from ./src/partials. After saving, partials are merged into ./src/email/*.html then automaticly moved to ./dist/*.html with css injected into markup.
- node v14.16.0
nvm use 14.16.0 - npm ^6.13.4
yarn dev- Browser sync + watchyarn images- Image Minificationyarn build- Add build files to zipyarn partials- Compiles partials into templatesyarn build- Add build files to zip
- html templates
/src/templates/*.html
- html templates
/src/partials/*.html
Include partials @@include('../partials/header.html').
- Reset
/src/scss/reset.scss- Embeded in head - Inline
/src/scss/inline.scss- Injected into markup - Mobile
/src/scss/mobile.scss- Embeded in head below reset
- Image folder
/src/images/ - Run
yarn images - Images Minified and moved to
/dist/images/
- Update .env test variables
line 14 - 17
TEST_FILE = './dist/index.html'
TEST_EMAIL_TO = '[email protected]'
TEST_EMAIL_FROM = '[email protected]'
TEST_SUBJECT = 'Gulp Email Test'
- Run
yarn test - Visit email client, look in
SPAMfolder
This builds a zip ready to be uploaded to mailchimp
- Run
yarn build - Copy html template name from the list
- Paste and hit
Enter - Zip file created by name and date, then moved to ./dist/zips
- Upload this zip to
mailchimp - Test in mailchimp, realise every email client does it's own thing and nothing works.
- Throw laptop into the sea!
If you get an error on first load, save the template the refresh the page, will fix that issue. Sometimes CSS isn't injected during build, fix this by re running the build process.
https://github.com/Email-builder/gulp-email-builder
www.litmus.com