前回の記事では環境構築をする前の前提知識を復習しました。
今回の記事ではpackage.jsonの作成から「ejs」というテンプレートエンジンを使用し、HTMLのビルドを行いたいと思います。
※こちらの記事は開発環境初心者向けの記事になりますので、バリバリ開発環境構築してるぜ！という方は、記事に対するツッコミや補足をお願いいたしますm(_ _)m
※本記事は小規模〜中規模サイトの環境構築を想定しています。
※シンプル、最低限の環境作成を目標としているため、gulp、webpack、parcelは使用しません。
npmプロジェクトを作成する
（※node.jsのインストール、バージョン管理については割愛させていただきます。）
まず最初にnpmプロジェクトを作成します。
好きな場所に下記のコマンドでディレクトリを作成します。
//「npm_sample」の部分は好きなプロジェクト名にしてください
$ mkdir npm_sample
フォルダが作成されたら
$ cd npm_sample
で作成したディレクトリに移動し、
$ npm init -y
を実行します。
「npm init」はこのディレクトリをnpm の管理下に置くという命令です。
「npm init」の後ろにつけた「-y」はオプションコマンドで、
「-y」をつけない場合は対話形式の質問をターミナル上で聞かれながらpackage.jsonが作成されます。「-y」をつけると質問に対して全てyesで答えた形でファイルが作成されます。
今回は勉学のためにプロジェクトを作成しているのでオプションをつけましたが、業務で使用する際は質問に、適切な値を入れてください。
ディレクトリ内にpackage.jsonというファイルが作成されました。
これでnpmのライブラリをインストールする準備が整いました。
ejsをインストール
前回の記事でグローバルインストールとローカルインストールの違いに触れました。
作成後のpackage.jsonのポータビリティを考慮して今回もローカルインストールで作成していきます。
//ローカルインストール
$ npm i -D ejs-cli
//↓省略しない場合
$ npm install --save-dev ejs-cli
インストールが完了したらpackage.jsonにこのような記述が追加されているはずです。
//package.json
//〜省略
・
・
"devDependencies": {
"ejs-cli": "^2.0.0"
}
・
・
//〜省略
ライブラリ名とバージョンが記載されています。
他にもライブラリやモジュールをインストールすると、こちらに追記されていきます。
ejsファイルの作成
ライブラリのインストールが済んだら、次はビルドするejsファイルを作成します。
ejsはインクルードや、パラメーターを渡したり、jsの記述をhtmlで使用したり、htmlを効率よく生成する為の便利な機能が沢山あります。
今回は複数のパーツに別れたejsファイルをインクルードして読み込み、一枚のHTMLを生成します。
下記と同じようにフォルダを用意し、拡張子「.ejs」としてファイルを作成し、設置します。
■ディレクトリ構成
node_sample //npm プロジェクトのディレクトリ
|
|
|__src //フォルダ
|
|___html //フォルダ
|
|__ index.ejs //ejsファイル
|
|__ _header.ejs //ejsファイル
|
|__ _contents.ejs //ejsファイル
|
|__ _footer.ejs //ejsファイル
src/に格納するファイルの中身は以下になります。↓
■index.ejsーーーーーーーーーーーーーーーーーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% include _header %>//各パーツファイルを読み込ませる記述
<% include _contents %>//各パーツファイルを読み込ませる記述
<% include _footer %>//各パーツファイルを読み込ませる記述
</body>
</html>
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
■_header.ejsーーーーーーーーーーーーーーーーーーーーー
<header>
<p>ヘッダーだよ</p>
</header>
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
■_contents.ejsーーーーーーーーーーーーーーーーーーーー
<div>
<p>
hogehogehogehogehogehoge<br>
fugafugafugafugafugafuga<br>
piyopiyopiyopiyopiyopiyo
</p>
</div>
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
■_footer.ejsーーーーーーーーーーーーーーーーーーーーー
<footer>
<p>フッターだよ</p>
</footer>
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
ejsのファイルの準備が終わったらpackage.jsonのscriptsフィールドにコマンドを登録します。↓
sample/package.json
~省略
"scripts": {
"build:html": "ejs-cli --base-dir src/html/ index.ejs --out dist/"
},
こちらのコマンドでは
「ejs-cli」を使って「src/html/」にある「index.ejs」をビルドして「/dist」に生成する
という指示を登録しています。
これを
$ npm run build:html
で実行すると・・・
＿人人人人人人人人人人人＿
＞ エラーになります。 ＜
￣Y^Y^Y^Y^YY^Y^Y^Y^Y￣
※なぜエラーになるのでしょうか？
それは生成先のフォルダがないからです。
ライブラリやモジュールによっては生成先に指定してあるフォルダがない場合、自動的に作成してくれる物もありますが、今回使用するejsは作成する必要があります。
2018/03/20追記
記事公開した当時は先にディレクトリを作成していないと、ファイルの生成が行われませんでしたが、
現在はアップデートされ、生成先のディレクトリが存在しない場合はディレクトリを生成してからファイルの生成を行ってくれるようになっていました。
現在はエラーは出ませんが、タスクを組み合わせる際に直列処理をする機会も出てきますので、
下記に記載されている項目は例とはずれてしまいますが、一度目を通すと良いと思います。
処理を繋げて再build（直列処理について）
gulpを使っていた人には同じみの並列処理、直列処理もcliの環境構築で使うことができます。
先ほどビルドに失敗したejsは生成先のフォルダを作成した後にejsのビルドを実行する必要があります。
なので、今回は一つ目の処理が終わってから二つ目の処理が動くように直列で処理を実行する必要があります。
生成先のディレクトリを生成する為のコマンドを追記します。
※windows環境を考慮する場合は「mkdirp」というモジュールをインストールします。
sample/package.json
~省略
"scripts": {
"build:html":"mkdir -p dist && ejs-cli --base-dir src/html/ index.ejs --out dist/"
},
コマンドの内容はまず最初に「mkdir -p」で「dist」フォルダを作成し、作成が終わったら、「ejs-cli」を使って「src/html/」にある「index.ejs」をビルドして「/dist」に生成する
という指示を登録しています。
「/dist」を生成後は下記のようなディレクトリ構成になります。
■ディレクトリ構成
node_sample //npm プロジェクトのディレクトリ
|
|__dist//生成したファイルが入るフォルダ
| |
| |__index.html//生成したHTMLファイル
|
|__src //フォルダ
|
|___html //フォルダ
|
|__ index.ejs //ejsファイル
|
|__ _header.ejs //ejsファイル
|
|__ _contents.ejs //ejsファイル
|
|__ _footer.ejs //ejsファイル
npm scriptsにタスクを登録する際は&&で直列処理、&で並列処理として登録することが可能です。
今回の記事では
・npm プロジェクトの作成
・ejsでhtmlをbuild
・直列処理の実行
の３点に触れました。
参考サイト
・npm package.json 日本語版 取扱説明書
・Node.js プロジェクト の 作成
・Grunt/Gulpで憔悴したおっさんの話
・ejs-cliで、EJSをCLIから使う方法