ハイパーリッリメモ

どうせ誰も見ていないと思うので、長文Twitter状態。

gulp + ejsでのサイト構築備忘録。

しばらく前にあれこれ勉強をしていたものの、忙殺されて中断を余儀なくされることも多々あり、あまり進捗が芳しくありませんでしたがようやく落ち着いたので少し手を入れました。備忘録というよりはただの感想。

やったこと

今回導入時にどうしようと思っていたんですが、コンパイルディレクトリをドメインルートにすることで解決しました。

  • masterブランチへpushしたら本番へ自動デプロイするように。

仕事でよくサーバ担当がそのようにしていて便利だなと思ったので。

  • IPv6に対応した。
  • SSL導入した。

IPv6SSLは意味があったかどうかは知りません。何となくサーバ側で対応したというので導入しただけです。

  • gulp + ejs でテンプレート構造にした。

よかったこと

  • ヘッダやフッタなどの共通部分を弄った際にコピペして回る必要がなくなった

これに関しては当初の大きな目的の一つでした。 Wordpressを使わずともこれを実装できた、という点では満足しています。 (特に自分の技術がどうこうでなく、そういうものを使った、というだけですが)

  • gitで共有した際の知見が何となく増えた

最初お構いなしにnode_moduleごとコミットに突っ込んじゃって偉いことになりました。

困ったこと

  • デフォルトだとejsをhtmlでコンパイルしてくれなかった

どうもバージョンごとに挙動が違うようで、最近のものは指定しないとejsのままコンパイルされてしまうみたいです。

gulp.task("ejs", function() {
    gulp.src(
        ["ejs/**/*.ejs",'!' + "ejs/**/_*.ejs"]
    )
        .pipe(ejs({}, {}, {ext: '.html'}))
        .pipe(gulp.dest("dist"))
        .pipe(browser.reload({stream:true}))
});
    .pipe(ejs({}, {}, {ext: '.html'}))

ここで拡張子を指定しています。バージョンによっては書式も異なっているようで…。ちなみにこちらはgulp-ejs v3.1.0のものです。

やり残したこと

  • js系何もしてない

jqueryの読込すらしていないので今は流行りの爆速みたいな感じになってますが、何か入れないとなぁと。なくてもいいっちゃいいんですが…。

  • 記事とかはjson管理にしてみたい

ブログというわけじゃないですがポートフォリオではあるので、1件1件手打ちにするよりはデータ形式で管理してしまいたいなぁと。

  • sass

今回スタティックな状態で既にローカルで準備をしていたので、cssはそのまま使いました。sassもちょっと学んでおきたいなと。

  • フォーム

google formでお茶を濁す体たらくに。SSLにした意味なし…。なんとなくphpでフォームにしたくない感じがあるんですが、perlは触ってきていないのでそんなことも言ってられない気はします。

ひとまず。

まだヤリタカッタダケー感があるので、ちゃんと応用出来るようにしていきたいと思います。

参考資料

テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG liginc.co.jp

gulp-ejsのバージョンが少し古いみたいなので、コンパイル拡張子は要修正。

What you see is what we wanted to see.