gulpを使用してレスポンシブ Eメール デザイン作成の効率をあげる | フロントエンドBlog | ミツエーリンクス
私がレスポンシブ Eメール デザインを作り始めた頃、制作ワークフローの中に2つの重い作業が発生していました。 CSSファイルからHTML要素に直接スタイルを指定するインライン化 変換後のHTMLファイルの送信 この作業を手作業で行うのは大きく時間を割きます。当時はまずツールでスタイルのインライン化を行い、今度はそのHTMLファイルを用いてメールを作成・送信をしていました。つまり、この作業はコピー&ペーストの繰り返しです。 HTMLメールは、たとえWebブラウザーで正常に表示されたとしても、いざ送信してみると必ずと言ってよいほど、レイアウトの崩れている閲覧環境（Webブラウザー/メーラー）があります。そのため、何度もコピー&ペーストしてはメールを送信していました。 そこで、タスクランナーを使用して上記の問題を解決する方法を探りました。探す基準としては、メディアクエリーの記述はstyle要素と
HTMLメール作成時のインラインスタイル化をgulpで行う - Qiita
別の記事でも書きましたが、HTMLメールを作るときはスタイルをインラインで書かないといけません。 もちろん、直接インラインでスタイルを定義するのは大変なので、<style>タグに書かれたCSSをインライン化するWebサービス（ジェネレータ）なんかを使ってインラインスタイル化したりするわけですが、いちいちジェネレータにソースをコピペするのは面倒くさいです。 ソースが変更されたら、インラインでスタイルが書かれたHTMLファイルが自動生成されるのが望ましい。 というわけでGulpです。 以下のような一連のタスクを、ファイルが変更される度に実行します。 EJSはお試しで使ってみた感じ。 EJSからHTMLを生成 SassからCSSを生成 2で生成したCSSを1で生成したHTMLにインラインで挿入 完成したHTMLをminify 全然大したことしてないですね。 gulpfileや必要なパッケージは以
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grunt Plugin of Inliner? · Issue #80 · foundation/foundation-emails
