helen's blog

ぽんこつによるぽんこつのためのぽんこつブログ

GulpとEJSやってみた

フロントのコーディングを早めるために使い始めるらしいのでやってみました

使うもの

Gulp

スクランナーしてくれるやつ
gulp.js - the streaming build system

EJS

JSをつかってHTMLを生成してくれる
includeとかして楽できる
EJS -- Embedded JavaScript templates

Gulpから試してみる

ファイルを移動するだけの簡単なお仕事です

インストール

$ npm install gulp --save-dev

設定ファイル作成

$ vim gulpfile.js

const gulp = require('gulp');

gulp.task('ejs', function() { // タスク定義
    gulp.src(
        ['./*.ejs', '!' + './_*.ejs'] // _から始まるejsファイルを除外
    )
        .pipe(gulp.dest('../dist')); // 出力先
});

ejsファイルをdist/に出力という設定です

実行してみた

$ vim ejs/hoge.ejs
hoge
$ gulp ejs 
Local gulp not found in ~/hoge/ejs
Try running: npm install gulp

あるぇー入れたのになー
link | npm Documentation
どうやらグローバルのnpmにリンクを貼らないといけない模様

$ npm link gulp
/Users/heleeen/hoge/node_modules/gulp -> /usr/local/lib/node_modules/gulp

$ gulp ejs 
module.js:338
    throw err;
          ^
Error: Cannot find module './lib/_stream_transform.js'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/heleeen/hoge/node_modules/gulp-ejs/node_modules/through2/node_modules/readable-stream/transform.js:1:80)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

モジュールが足りないらしいので
足りないものを一気に入れちゃいます
ちなみに入れ直しでごちゃごちゃエラー出たので
一旦node_modulesディレクトリ抹消しました

$ npm install -g npm-install-missing
/usr/local/bin/npm-install-missing -> /usr/local/lib/node_modules/npm-install-missing/bin/npm-install-missing
npm-install-missing@0.1.4 /usr/local/lib/node_modules/npm-install-missing
├── async@2.0.1 (lodash@4.15.0)
└── npm@3.10.6

【Node.js】足りないモジュールをたったの一行でインストールするコマンド - Qiita

今度こそ

$ gulp ejs
[12:49:29] Using gulpfile ~/work/gulp/gulpfile.js
[12:49:29] Starting 'ejs'...
[12:49:29] Finished 'ejs' after 15 ms

# 確認
$ less dist/hoge.ejs
hoge

できた

ejsでhtmlをincludeして楽しちゃう

次はejsをパーツ化してincludeして
共通パーツは1つのファイルを編集すれば同じ箇所が変わるようにしちゃいます

インストール

$ npm install gulp-ejs --save-dev

準備

# 荒れそうなのでsource/からdist/に出力します
$ vim gulpfile.js
const gulp = require('gulp');
const ejs = require('gulp-ejs');

gulp.task('ejs', function() {
    gulp.src(
        ['./source/*.ejs', '!' + './source/_*.ejs']
    )
        .pipe(ejs({}, {'ext': '.html'})) // 拡張子指定
        .pipe(gulp.dest('./dist'));
});

# 用意したファイル
$ ls -l source
-rw-r--r--  1 helen  staff  46  9 11 12:59 _footer.ejs # htmlにしたくないファイルは_つける自己ルール
-rw-r--r--  1 helen  staff  66  9 11 12:58 _header.ejs # htmlにしたくないファイルは_つける自己ルール
-rw-r--r--  1 helen  staff  63  9 11 13:01 hoge.ejs

$ vim source/hoge.ejs
<%- include('./_header') %> # _header.ejsをinclude
hoge
<%- include('./_footer') %> # _footer.ejsをinclude

# 実行
$ gulp ejs
[00:23:31] Using gulpfile ~/work/gulp/gulpfile.js
[00:23:31] Starting 'ejs'...
[00:23:31] Finished 'ejs' after 13 ms
# 確認
$ ls -l 
ls -l dist
total 8
-rw-r--r--  1 helen  staff  121  9 12 00:23 hoge.html # できてる!

$ less dist/hoge.html # いい感じ!
<head>
  <meta charset="utf8">
  <title>gulp test</title>
</head>
hoge
- 
<footer>
  <p>Copyright heleeen</p>
</footer>

拡張子変換してるとこ

さっきのにあるこれだけ
jsonファイルを使わないため適当にかっこつけたのですがうまくいきました

 .pipe(ejs({}, {'ext': '.html'}))

gulp-ejs 2.0.0 で .html ファイルを出力する場合拡張子の指定が必須に - Qiita