前提・実現したいこと
EJSをhtmlに書き出すタスクを作成しています。
・余分な余白や改行は削除。ただし、コードの圧縮はしない。
・gulpやNode.jsのバージョンは変更しない。
発生している問題・エラーメッセージ
書き出したhtmlのソースコードの、1行目と最終行に余分な改行が入ってしまうのを消したい。
(<!DOCTYPE html>
の前と、</html>
の後ろに余分な改行が入ってしまう)
該当のソースコード
gulpfile.js
// gulpプラグインの読み込み const gulp = require('gulp'); const runSequence = require('run-sequence'); // コンパイルするプラグインの読み込み // ejs const htmlhint = require('gulp-htmlhint'); const htmlmin = require('gulp-htmlmin'); const ejs = require('gulp-ejs'); // ファイル名変更 const rename = require('gulp-rename'); // エラー出力 const plumber = require('gulp-plumber'); const notify = require('gulp-notify'); // HTMLタスクを生成する gulp.task('html', function() { // ファイルを取得 return ( gulp.src(['assets/html/**/*.ejs', '!assets/**/_*.ejs']) // コンパイルを実行 .pipe(plumber( {errorHandler: notify.onError('<%= error.message %>')} )) .pipe(ejs()) .pipe(htmlmin( { preserveLineBreaks: true, collapseWhitespace: true, removeComments: true } )) .pipe(htmlhint('.htmlhintrc')) .pipe(htmlhint.reporter()) .pipe(rename({extname: '.html'})) .on('error', function(e){ console.log(e); }) // フォルダ以下に保存 .pipe(gulp.dest('dist/')) ); });
index.ejs
<%# ejsRootは都度変更する %> <% const ejsRoot = ''; %> <% const pageTitle = 'hoge'; const pageDescription = 'hogehoge'; const pageCanonical = 'http://hogehogehogehoge.com/'; %> <!DOCTYPE html> <html lang="ja" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><%- pageTitle %></title> <meta name="Description" content="<%= pageDescription %>"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" type="text/css" href="/css/index.css"> <meta property="og:type" content="website"> <meta property="og:locale" content="ja_JP"> <meta property="og:title" content="<%= pageTitle %>"> <meta property="og:description" content="<%= pageDescription %>"> <meta property="og:url" content="<%= pageCanonical %>"> <meta property="og:image" content="/image/ogp.jpg"> </head> <body> <header class="temp-header"> <h1 class="temp-header-lv1">hogehoge Website</h1> </header> <main class="temp-main"> <p>現在リニューアル工事中です。</p> <% const snsLists = [ { alt: 'Facebook', href: 'https://www.facebook.com/hogehoge', }, { alt: 'Instagram', href: 'https://www.instagram.com/hogehoge/', }, { alt: 'Flickr', href: 'https://www.flickr.com/photos/hogehoge/', }, { alt: 'Blogger', href: 'http://hogehoge.blogspot.jp/', } ] %> <ul class="temp-list"> <% snsLists.forEach((v,i) => { %> <li> <a href="<%- v.href %>" target="_blank"> <img src="/image/icon_sns0<%- i+1 %>.svg" alt="<%- v.alt %>"> </a> </li> <% }) %> </ul> </main> <%- include(ejsRoot + '_component/_copyright') %> <%# JS %> <script src="/js/common.js" charset="utf-8"></script> </body> </html>
index.html
(<!DOCTYPE html>
の前と、</html>
の後ろに余分な改行が入ってしまう)
<!DOCTYPE html> <html lang="ja" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ・ ・ 中略 ・ ・ </body> </html>
試したこと
<%# ejsRootは都度変更する %> <% const ejsRoot = ''; %> <% const pageTitle = 'hoge'; const pageDescription = 'hogehoge'; const pageCanonical = 'http://hogehogehogehoge.com/'; %>
上記コードを、<head>
タグ内に入れると、
一行目
の不要な改行は出力されませんでした。
可能であれば、<!DOCTYPE html>
より上に記述したいと考えております。
補足情報
Node.js
v8.9.4
gulp
CLI version 3.9.1
Local version 3.9.1
ご教授いただけないでしょうか。よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。