Node.jsとExpressとPugを利用する設定方法

8886 ワード
Jade pug Express Node.js Node.js テキストリンク

目的

Node.jsを利用したアプリケーションを作る際の一通りの流れのメモ

環境

  • node 4.4.3
  • npm 2.15.1
  • Windows 8.1

環境構築

まずプロジェクト用フォルダの作成を行います。

commandprompt
mkdir Hoge

Express-generatorを利用

Expressはルーティング機能が入っているモジュールです。Express-generatorでは、プロジェクトのひな型をジェネレートしてくれるのでそれを利用します。

commandprompt
npm i -g express-generator

次に、ジェネレータでプロジェクトのひな型を作成します。
--gitは.gitignoreを作成してくれます。注意として、Hogeの一つ上の階層で以下のコマンドを実行しなければなりません。また、テンプレートエンジンはデフォルトではjadeになります。私はpug(旧jade)を利用するのでそのままテンプレートエンジンはjadeにし、後で拡張子を変えます。

commandprompt
express --git Hoge

package.jsonの変更

ここの章に関しては、人それぞれ作りたいで内容が変わるので一例としてみてください。私の場合は、electronで何かしようと思っていたので、electronが入っています。また、pug(旧jade)を利用するのでpugも入れています。

package.json
{
  "name": "CommentViewer",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "cheerio": "^0.20.0",
    "electron-packager": "^7.0.1",
    "electron-prebuilt": "^0.37.7",
    "pug": "^2.0.0-alpha6",
    "pug-cli": "^1.0.0-alpha1",
    "request": "^2.72.0"
  }
}

その後、npm iで必要なモジュールを入れていきましょう。

commandprompt
cd Hoge
npm i

views内のファイルの拡張子の変更

viewsの中にある*.jadeファイルをすべてpugにします。

commandprompt
cd views
mv error.jade error.pug
mv index.jade index.pug
mv layout.jade layout.pug
cd ..

app.jsの変更

次に、app.jsに記述されているview engineをjadeからpugに変更します。

app.js(before)
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

を以下に変更

app.js(after)
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

サーバの起動

次に、サーバの起動を行います。

commandprompt
npm start

起動後は以下のURLにアクセスすると以下の図が表示されると思います。