Need help with generator-htmlemail?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jahvi
123 Stars 21 Forks MIT License 62 Commits 0 Opened issues

Description

HTML Email boilerplate generator for Yeoman

Services available

!
?

Need anything else?

Contributors list

# 88,459
PHP
magento...
magento...
magento
50 commits
# 187,405
crl
HTML
CSS
ocsp
1 commit
# 110,709
CSS
Angular
cypress
transfo...
1 commit
# 195,058
CSS
HTML
webpack...
Babel
1 commit
# 158,716
HTML
CSS
text-pr...
1 commit

generator-htmlemail

A Yeoman generator to create HTML emails with built-in support for SCSS, image optimization, CSS inlining, test email delivery and more.

Based on Marco Solazzi's grunt-email-boilerplate.

Features

Requirements

  • Node.js >= 0.8.11 (install wiki)
  • Yeoman >= 1.0.0 (
    npm install -g yo
    )
  • Ruby >= 1.8.7 (installers)
  • Compass >= 0.12.2 (
    gem install compass
    )
  • Premailer >= 1.7.3 (
    gem install premailer
    and, most of the time,
    gem install hpricot
    )

Getting Started

To install generator-htmlemail from npm, run:

$ npm install -g generator-htmlemail

Then, initiate the generator in an empty directory with:

$ yo htmlemail

Documentation

Prompts

This generator will ask you a few questions about your project before scaffolding the file structure. Here's a summary of what each question is used for:

[?] What's the project name?

Used in the generated

package.json
file as the name of the project, by default this is the folder name.

[?] What template do you want to use?

Enter the URL of the boilerplate HTML file you want to use for your email, this can be the "raw" version of a github file or gist. Defaults to a modified version of HTML Email Boilerplate.

[?] What's your production domain?

Used by the premailer task to rewrite your assets url, e.g:


Becomes:


[?] Select the SMTP host to use when sending test emails

Used to set up the nodemailer transport service.

[?] What's your SMTP server username and passsword?

Used to authenticate with the SMTP service.

[?] What's the name and email of the test email recipient?

The name and email address of the account where the test email will be sent.

Sources

Sources are located in the

app
folder:
  • index.html
    : HTML boilerplate
  • scss/
    : SCSS folder
    • style.scss
      : main stylesheet
  • img
    : source images of your email
  • css
    : destination folder of compiled SCSS sources

Default Tasks

The generator comes with some predefined tasks to cover average email development needs.

dev
Task

This task runs a watch trigger for changes to the

scss
folder and starts a static HTTP server at
http://localhost:8000
pointing to the
app
folder. The browser will reload automatically (thanks to the
livereload
task) upon changes to your SCSS or HTML files.

build
Task

This task creates a build from your sources. It creates a folder named

dist
next to
app
, then compiles your SCSSes and inlines the resulting stylesheet in the HTML source through Premailer. Finally it starts a static HTTP server at
http://localhost:8000
pointing to the
dist
folder.

Images are optimized with jpegtran and OptiPNG.

send
Task

This task sends the compiled email to any configured recipient. This basically performs the same actions as the

build
task only that instead of running a static HTTP server it'll try to send the actual email.

Yeoman will ask you for your email transport settings and recipients on startup but if you wish to further customize these options refer to the

nodemailer
tasks in
Gruntfile.js
.

Docker

A standalone

Dockerfile
is included.
docker build -t htmlemail .
docker run -t -i htmlemail yo htmlemail

Tasks Customization

See

Gruntfile.js
source for more options and customizations.

Contributing

Feel free to submit bugs or pull requests, just make sure to target the develop branch and follow the same coding style.

License

MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.