Node.js で小規模なアプリケーションを開発する方法 その3

今日は金曜日。皆さん一週間お勤めお疲れさまでした。もしかしたら土日もお仕事ある方もいるかもしれませんが、どうかお疲れのでませんようにご自愛ください。

# staticにGulpを導入する

```static``` にGulpを導入するには、下記のコマンドを入力します。

```
cd static
npm install --save-dev gulp rimraf
```

```gulpfile.js``` を作成します。

```
touch gulpfile.js
```

```gulpfile.js``` の内容は下記のようにします。

```js:gulpfile.js
'use strict';

var gulp = require('gulp')
var rimraf = require('rimraf')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')

gulp.task('clean', function (cb) {
  rimraf('dist', cb)
})

gulp.task('copy', ['clean'], function () {
  return gulp.src('public/**/*')
    .pipe(gulp.dest('dist'))
})

gulp.task('webpack', ['clean'], function (cb) {
  webpackConfig.plugins = (webpackConfig.plugins || []).concat([
    new webpack.optimize.UglifyJsPlugin(),
  ])

  webpack(webpackConfig, cb)
})

gulp.task('build', [
  'clean',
  'copy',
  'webpack',
])

gulp.task('default', ['build'])

```

```npm``` を使用して簡単にビルドできるように ```package.json``` を編集します。

```json:package.json(変更前)
{
  "name": "static",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node_modules/.bin/nodemon -w webpack.config.js node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --port=8080 --content-base=public",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "nodemon": "^1.7.1",
    "rimraf": "^2.4.3",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  }
}

```

```json:package.json(変更後)
{
  "name": "static",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node_modules/.bin/nodemon -w webpack.config.js node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --port=8080 --content-base=public",
    "build": "node_modules/.bin/gulp build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "nodemon": "^1.7.1",
    "rimraf": "^2.4.3",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  }
}

```

変更点は下記の1行です。

```
    "build": "node_modules/.bin/gulp build",
```

ビルドするには下記のコマンドを入力します。

```
npm run build
```

ビルドに成功すると ```static``` ディレクトリ内に ```dist``` ディレクトリが作成されます。

# app をプロダクションモードで動作させてみる

まずは ```app``` ディレクトリに移動します。

```
cd ../app
```

プロダクションモードで動作させるには、下記のコマンドを入力します。

```
NODE_ENV=production npm start
```

サーバが起動したら、 http://localhost:3000 にアクセスします。成功していると、開発モードで動作させて場合と同様の画面が表示されます。

開発時は ```app``` と ```static``` の両方のサーバを動かして、運用時は ```app``` のみを動かすというのが、お気に入りのやり方です。

# app/layouts/default.jade をもう少しマシにする
おまけで ```app/layouts/default.jade``` の体裁を整えようと思います。

```jade:app/layouts/default.jade(変更前)
doctype
html(lang='ja')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title Nippo
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap.min.css')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap-theme.min.css')
    block style
    script(src='#{baseUrl}/static/js/vendor/modernizr-2.8.3.min.js')
  body
    block content
    script(src='#{baseUrl}/static/js/vendor/jquery-1.11.2.min.js')
    script(src='#{baseUrl}/static/js/vendor/bootstrap.min.js')
    script(src='#{baseUrl}/static/js/bundle.js')
    block script

```

```jade:app/layouts/default.jade(変更後)
doctype
html(lang='ja')
  head
    meta(charset='UTF-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
    title Nippo
    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap.min.css')
    link(rel='stylesheet', href='#{baseUrl}/static/css/bootstrap-theme.min.css')
    link(rel='stylesheet', href='#{baseUrl}/static/css/main.css')
    block style
    script(src='#{baseUrl}/static/js/vendor/modernizr-2.8.3.min.js')
  body
    nav.navbar.navbar-default.navbar-static-top
      .container-fluid
        .navbar-header
          a.navbar-brand(href='#{baseUrl}/') Nippo
    .container-fluid
      block content
    footer
      .container-fluid
        &copy; 2015 Lorem Ipsum Co. Ltd.
    script(src='#{baseUrl}/static/js/vendor/jquery-1.11.2.min.js')
    script(src='#{baseUrl}/static/js/vendor/bootstrap.min.js')
    script(src='#{baseUrl}/static/js/bundle.js')
    block script

```

変更点は下記のとおりです(CSS読み込みの追加は今まで忘れてただけです、すいません)。

```jade:
link(rel='stylesheet', href='#{baseUrl}/static/css/main.css')
```

```jade:
nav.navbar.navbar-default.navbar-static-top
  .container-fluid
    .navbar-header
      a.navbar-brand(href='#{baseUrl}/') Nippo
.container-fluid
  block content
footer
  .container-fluid
    &copy; 2015 Lorem Ipsum Co. Ltd.
```

```static/css/main.css``` を編集してフッタをカッコ良くします。

```css:static/css/main.css
@charset "UTF-8";

footer {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 100px;
  color: #767676;
  text-align: center;
  border-top: 1px solid #e5e5e5;
}

```

ナビゲーションバーが追加され、フッタがいい感じに表示されるようになったら成功です。

# おわりに
明日はデータベースの接続について書いて行こうと思います。