Skip to content

Instantly share code, notes, and snippets.

@thyagorafaell

thyagorafaell/build.html

Created April 20, 2015 17:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thyagorafaell/a2655e204e395e415595 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thyagorafaell/a2655e204e395e415595 to your computer and use it in GitHub Desktop.
Download ZIP
Teste de uso da ferramento gulp-inline-css para workflow de desenvolvimento de emails maketing.
Raw
build.html
<html>
<head>
<title>Teste de email com gulp-inline-css</title>
</head>
<body>
<table>
<tr>
<td>
<p style="font-size: 18px; margin: 0; padding-top: 3px;">
Lorem ipsum <strong style="color: #303030;">dolor sit</strong> amet.
</p>
<p style="font-size: 18px; margin: 0; padding-top: 3px;">
<a href="http://thyagorafaell.github.io" class="text-center" target="_blank" style="color: green; margin-left: 5px; margin-right: 7px; text-align: center; text-decoration: none;">Opa</a>
</p>
<p id="main" style="border: 1px solid red; font-size: 18px; margin: 0; padding-top: 3px;">
Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet.
</p>
</td>
</tr>
</table>
</body>
</html>
Raw
gulpfile.js
var gulp = require('gulp'),
inlineCss = require('gulp-inline-css');
gulp.task('default', function() {
return gulp.src('./index.html')
.pipe(inlineCss({
applyStyleTags: true,
removeStyleTags: true
}))
.pipe(gulp.dest('build/'));
});
Raw
index.html
<html>
<head>
<title>Teste de email com gulp-inline-css</title>
<style>
p {
margin: 0;
font-size: 18px;
padding-top: 3px;
}
strong { color: #303030 }
#main { border: 1px solid red; }
</style>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<table>
<tr>
<td>
<p>
Lorem ipsum <strong>dolor sit</strong> amet.
</p>
<p>
<a href="http://thyagorafaell.github.io" class="text-center" target="_blank">Opa</a>
</p>
<p id="main">
Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet.<br>
Lorem ipsum dolor sit amet.
</p>
</td>
</tr>
</table>
</body>
</html>
Raw
main.css
a {
text-decoration: none;
color: green;
}
.text-center { text-align: center; }
[target="_blank"] {
margin-left: 5px;
margin-right: 7px;
}
Raw
package.json
{
"name": "test-gulp-inline-css",
"version": "0.0.0",
"description": "Teste de workflow para desenvolvimento de email marketing.",
"main": "gulpfile.js",
"dependencies": {
"gulp": "~3.8.11",
"gulp-inline-css": "~2.0.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "BSD-2-Clause"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment