Node.js 自動處理 (2)

基本介紹

教學目標

透過 Yeoman 套件統整專案開發流程,減少重複的工作專注在於專案的架構與設計。

前置作業

  1. 完成 Node.js 套件安裝與設置。

套件安裝

1
$ npm install --global yo bower grunt-cli

使用教學

(註: 主要以劇集 App 專屬網站的情境應用為例。)

建立專案資料夾

1
2
$ mkdir drama-app
$ cd drama-app

安裝 Express 框架自動產生器。

1
$ npm install generator-express

開始建立 Exprsss 框架。

1
$ yo express

設定基本框架。

1
2
? Select a version to install: (Use arrow keys)
❯ Basic

選擇 EJS 模版引擎。

1
2
? Select a view engine to use: 
❯ EJS

不需要使用 CSS 預處理器。

1
2
? Select a css preprocessor to use (Sass Requires Ruby): (Use arrow keys)
None

選擇 Grunt 建立工具。

1
2
? Select a build tool to use: (Use arrow keys)
❯ Grunt

修改網頁呈現的資料。

1
2
$ cd routes
$ vi index.js

1
2
3
4
5
6
7
8
9
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: '劇集 App' });
});

module.exports = router;

修改網頁呈現的格式。

1
2
$ cd views
$ vi index.ejs

1
2
3
4
<% include header %>
<h1><%-title %></h1>
<p>Welcome to <b><%-title %></b></p>
<% include footer %>

啟動 Express 專案。

1
$ grunt

在瀏覽器網址列輸入 http://localhost:3000 ,就能開始使用所建立好的 Express 專案網站。

相關資源