Grunt.jsを使った Expressの開発環境構築

Grunt.jsを使ったExpressの開発環境構築

Node.js勉強会 in 大阪 2013.5.25　　　　　　　　　　　　　　

自己紹介

• かみやん (Twitter@kamiyam)

• Meteorworks エンジニア

• Webサービスつくってます

http://nantokaworks.com



grunt とはなにか？

Grunt.js

JavaScript(Node.js)製タスクランナー

http://livepage.apple.com/

































































































Grunt.jsは(面倒な)タスクを代わりに代行してくれるツール

山積みのタスk･･･• CoffeeScriptのコンパイル

• Sassのコンパイル

• CSSファイルのコードミニファイ化･結合

• 画像ファイルの圧縮

• 画面の表示確認

キーワード

• grunt: 起動など(gruntコマンド)

• Gruntfile.js: gruntのタスク設定ファイル

キーワード

• jQuery: JavaScriptのライブラリ

• package.json: パッケージ構成ファイル

package.json 一緒に利用するモジュール情報などを

記述する設定ファイル

Node.jsで作成するすべての成果物は

一つのパッケージモジュールとして扱うため、

必須ではないがかならず添えておくようにする。

インストール

$ npm install -g grunt-cli

※ gruntコマンドが利用可能となる。

環境構築

$ vim Gruntfile.js

Gruntfile.js 設定例module.exports = function(grunt) {

grunt.initConfig({ xxxxxx: { //......... } }); grunt.loadNpmTasks('grunt-contrib-xxxxxx'); grunt.registerTask('default', ['xxxxxx']);};

プロジェクトの内容、規模によってつかうタスク(gruntのモジュール)を追加していく。jQueryのようにプラグインを追加するイメージ

open & watch & LiveReload タスク


1，ブラウザを開いて



2，ファイルの変更(を監視)して




3，ブラウザをリロードして





確認する!!





超めんどくさいですよね。確認する!!

デモダウンロード

https://gist.github.com/kamiyam/4996713





$ npm install$ grunt

デモ実行

ちなみに似たようなことをする仲間にこのようなおっさんがいます(ry!

gruntもNode.jsのサーバを起動しています。

ここまではフロントエンド側で完結する話。

Grunt.jsとExpressの連携

どのようにしてgruntとExpressを連携させるのか

grunt

Grunt.jsで起動したフロントサーバとExpressのバックエンドサーバの連携

grunt


grunt


Proxy

リバースプロキシモジュールを使う(単体)

■ grunt-connect-proxyhttps://github.com/drewzboto/grunt-connect-proxy※ 設定などの細かい内容はサイトを参照

https://github.com/drewzboto/grunt-connect-proxy




テンプレート生成モジュールgrunt-init を使う

■ grunt-init-expresshttps://github.com/kamiyam/grunt-init-express





フォルダ構成など各個人の癖もありこれが正解というものがない

例えば、

• Viewファイルだけに限定する or しない

• サーバサイドのjsファイルのwatch、

LiveReloadを許可するのか

(supervisorのリロード時間とgruntのリ

ロード時間が合わない･･･などなど)

使いこなせれば、バックエンドの言語を問わず（例えば、PHPなどWordPressでも) 同じことが出来る。Watch するファイルが変わるだけ。

grunt

Proxy

まとめ

• Grunt.js はNode.jsを用いたタスクランナー(便利屋)• リバースプロキシモジュールを使えばバックエンドの種類は問わない

ご静聴ありがとうございました

Education

Grunt.jsを使った Expressの開発環境構築