This is a starter boilerplate for a simple layout of responsive emails based on MJML and Gulp.
Features:
- Develop emails using the MJML framework in the code editor using Gulp.
- Check templates for errors.
- Using environment variables. For example, to load local images during development and replace asset paths during build with remote resources.
Recommended to use Visual Studio Code + MJML Plugin
npm run install
- to install all dependencies.npm run dev
- to develop and run a server with hot reload.npm run build
- to build all emails and minify the code.
Framework documentation of MJML here
You can embed env variables in templates. The plugin gulp-inject-envs is used.
Example:
-
Path to resources, already set as
env ASSETS_PATH=/assets
, see package.jsonbuild
anddev
scripts. you can set different variables for different environments. -
Available in templates like
<ENV::ASSETS_PATH>
. For example:<img src="<ENV::ASSETS_PATH>/logo.png" alt="Logo">
dist
- build output directory and server root.src/assets
- resources directory.src/components
- MJML templates to include. Documentation.src/pages
- e-mail pages.