gruntで Expressを使った開発を行う環境を生成するgrunt-initテンプレートを公開しました。

概要

grunt を使うとSass、LESSのコンパイルやWebSocketを使ったLiveReload、ファイルの圧縮など様々なことがことができますが、grunt-init コマンドを使うことでscaffoldingな構成を簡単に生成することができます。

すでに提供されているテンプレートを使用することもできますが、今回のようにベースとなるテンプレートを自分で作成することもできます。

公開されている grunt-init の 他のテンプレートについては過去記事を参照してください。

grunt-init-express はこんな機能があります。

gruntからNode.jsを実行
Node.jsをgruntのプロセスで管理するため gruntコマンドを使用します。
Node.jsはsupervisorコマンドを使用しています。
SassとCoffeeScriptのコンパイル
SassからCSSへ、CoffeeScriptからJavaScriptへ自動でコンパイルします。
HTML、CSS、JavaScript、View(ejs/jade)ファイルのファイル変更監視
public(private)フォルダのHTML、CSS、JavaScriptcファイルの変更を監視して表示しているブラウザを自動でリロードします。
LiveReloadを利用する場合はブラウザの拡張機能をインストールします。(後述)

インストール

Node.jsとSassのインストールは完了しているものとします。

Node.js
0.10.0
npm
1.2.14
grunt.js
0.4.1

まずは、grunt-init をインストールします。


$ npm install grunt-init -g

次に、grunt-init-express をインストールします。


$ git clone https://github.com/kamiyam/grunt-init-express ~/.grunt-init/express

そして grunt-init を実行します。 作成するNode.jsアプリの情報を入力しますが、name以外は(ひとまず)未入力でもOKです。


$ mkdir work
$ cd work

$ grunt-init express ## work フォルダ内は空であること
Running "init:express" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.

"express" template notes:
For more information about Express, please see the docs at
http://expressjs.com/guide.html

Please answer the following:
[?] Project name (Express Application name) express[enter]
[?] Description (Express Application description) [enter]
[?] Version (0.1.0) [enter]
[?] Project git repository (git://github.com/kamiya/exs.git) [enter]
[?] Project homepage (https://github.com/kamiya/exs) [enter]
[?] Project issues tracker (https://github.com/kamiya/exs/issues) [enter]
[?] Licenses (MIT) [enter]
[?] Author name (autor) [enter]
[?] Author email (xxxxxxx@exampl.com) [enter]
[?] Author url (none) [enter]
[?] What versions of grunt does it require? (~0.4.1) [enter]
[?] What versions of node does it run on? (>= 0.8.0) [enter]
[?] Do you need to make any changes to the above before continuing? (y/N) [enter]

Writing .gitignore...OK
Writing Gruntfile.js...OK
Writing app/private/.temp/empty...OK
Writing app/private/images/empty...OK
Writing app/private/index.html...OK
Writing app/private/javascripts/main.js...OK
Writing app/private/stylesheets/style.scss...OK
Writing LICENSE-MIT...OK
Writing package.json...OK

Initialized from template "express".
You should now install project dependencies with npm install. After comand
express app

Done, without errors.

Expressをインストールします。


$ cd app
$ express
destination is not empty, continue? (yes or no) yes
# すでにappフォルダがあるため実行するかどうかを聞かれますが、そのまま実行します。

   create : app
   create : app/package.json
   create : app/app.js
   create : app/public
   create : app/public/javascripts
   create : app/public/images
   create : app/public/stylesheets
   create : app/public/stylesheets/style.css
   create : app/routes
   create : app/routes/index.js
   create : app/routes/user.js
   create : app/views
   create : app/views/layout.jade
   create : app/views/index.jade

   install dependencies:
     $ cd app && npm install

   run the app:
     $ node app

$ cd app
$ npm install
npm WARN package.json application-name@0.0.1 No README.md file found!
npm http GET https://registry.npmjs.org/express/3.1.0
npm http GET https://registry.npmjs.org/jade
...(省略)

$ cd ..

$ npm install && grunt

Express server listening on port 3000...

Node.js アプリのサーバとして デフォルト 3000番
gruntのフロントサーバとして デフォルト 8000番を使用しています。
(使用するポートはGruntfile.jsで変更できます。)

CTRL+C で プロセスを停止します

もう一度立ち上げる時は grunt を実行します


$ grunt 

LiveReload用のブラウザ拡張機能をインストールしていない場合はインストールします。

How do I install and use the browser extensions?

gruntを実行した状態で http://localhost:8000へアクセスし、ブラウザのLiveReload拡張機能を使用すると、public(private)フォルダ以下のHTML、CSS(.css/.sass/.scss)、JS(.js/.coffee)、Viewフォルダ以下のテンプレートファイル(.ejs/.jade)の変更を監視して、ブラウザのリロードを行います。

※ 確認できている問題: grunt-livereload のリロード時間を外部からコントロール出来ないので、たまにNode.jsのjsファイルの更新タイミングとかぶってエラーが出る時があります。しゅ、手動でリロードするとなおります・・・