Make better response mail templates Through mjml. mjml: The only framework that makes responsive email easy
When all you need is a really simple responsive HTML email template, you can do like this: responsive-html-email-template. It looks really simple, But it is not simple and unfriendly to do it. Of course you can use some tools，such as gulp & gulp-inline-css. The code is as follows：
let gulp = require('gulp'),
inlineCss = require('gulp-inline-css')
gulp.task('inline-css', function() {
return gulp.src('./src/**/*.html')
.pipe(inlineCss())
.pipe(gulp.dest('build/'))
})
gulp.task('watch', function () {
gulp.watch('./src/**/*.html', ['inline-css'])
})
gulp.task('default', ['watch'])It can help you make mail templates like write a web page. but you have to support responsive by yourself. oh, opps. You may be very helpless until you meet her before. mjml, She may be your savior, for how to make a simple set of mail templates. A fly in the ointment ，she also has some problems. So, I provided this tool so that you can use her more easily.
git clone https://github.com/nicejade/responsive-email-template
npm i (yarn)
./node_modules/.bin/mjml --watch src/index.mjml -o dist/index.html
gulp // If you need custom style to support dynamic content.note: In order to operate easily, you can also use the following methods to run mjml:
Or with the shortcut using npm bin
$(npm bin)/mjml --watch src/index.mjml -o dist/index.html
Or by using npx
note: npx is included with npm > v5.2 or can be installed separately.
npx mjml --watch src/index.mjml -o dist/index.html
For more information on how to execute binary files in NPM packages, see :执行 npm 包的二进制文件 please.
- Easy and quick: Write less code, save time and code more efficiently with MJML’s semantic syntax.
- Responsive: MJML is responsive by design on most-popular email clients, even Outlook.
- Component based: Write high-level code thanks to reusable and extensible components.
- Support for customization: Replace the mjmi default style by gulp.
- Dynamic support: Introduce custom styles to support dynamic content by gulp.
| 微信公众号 | 前端微信群 | 推荐 Web 应用 | 推荐小程序 |
|---|---|---|---|
| 😉 静晴轩 | ✨ 大前端联盟 | 🎉 倾城之链 | 🌊 倾城之链 |
 |
 |
 |
Copyright (c) 2017-present, nicejade