grunt 管理下で Express(Node.js)を開発できるgrunt-init-express を公開しました

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

概要

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

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

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

インストール

まずは、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ファイルの更新タイミングとかぶってエラーが出る時があります。しゅ、手動でリロードするとなおります・・・