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
今度こそ
$ 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して
共通パーツは１つのファイルを編集すれば同じ箇所が変わるようにしちゃいます
インストール
$ 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>
