Yeomanのインストール記録 Windows Vista SP2に素の状態からのインストール

Yeomanについて

サイト制作のワークフローを効率的に管理できる　Yeoman（ヨーマン）をWindows Vista SP2に素の状態からのインストールした時の記録です。 似たような機能をもった roots というツールがありますが、情報量では、Yeomanが圧倒しています。制作のベースとなるファイル群を生成してくれるジェネレーターもYeomanには沢山アップされています。

The web's scaffolding tool for modern webapps | Yeoman

インストール作業の参考にさせていただいたページ

下記のページの内容を基に、インストール作業をしました。
WindowsでYeoman + Reveal.js

インストール記録

Gitも入っていない状態から始めます。

C:\Users\ariki>git --version 'git' は、
内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ
ファイルとして認識されていません。

Gitのインストール

http://git-scm.com/download/win
Git-1.9.4-preview20140815.exeをインストール
インストール時のオプションで、コマンドプロンプトでも使える設定を選びます。

Gitがインストールされたことを確認

C:\Windows\system32>git --version
git version 1.9.4.msysgit.1

なぜか、管理者モードで起動したコマンドプロンプトで無いと、パス無しで、Gitが起動しませんでした。ユーザーの環境変数、システム環境変数も色々変更して、再起動もしてみましたが、パス無しでは、起動しませんでした。原因は分かっていませんが、続けることに問題はないので、進めます。

 
node.jsのインストール

http://nodejs.org/download/
node-v0.10.31-x86.msiをインストール

node と npm がインストールされたことを確認

C:\Users\ariki>node -v
v0.10.31

C:\Users\ariki>npm -v
1.4.23

Yeoman/Grunt/Bowerのインストール

C:\Windows\system32>npm install -g bower grunt-cli yo

Yeoman/Grunt/Bowerがインストールされたことを確認

C:\Users\ariki>yo --version
1.2.1

C:\Users\ariki>grunt --version
grunt-cli v0.1.13

C:\Users\ariki>bower --version
1.3.9

Reveal.jsのジェネレータのインストール

Reveal.jsというプレゼン用のフレームワークのジェネレーターを入れます。

C:\Windows\system32>npm install -g generator-reveal

プロジェクトを作成します

C:\yeoman_test>yo reveal
[?] What are you going to talk about? Reveal.js and Yeoman is Awesomeness
[?] What version should we put in the package.json file? 0.0.0
[?] Do you want to use SASS to create a custom theme? This requires you to have
[?] Do you want to use SASS to create a custom theme? This requires you to haveRuby and Sass installed. Yes
[?] Do you want to deploy your presentation to Github Pages? This requires an em
[?] Do you want to deploy your presentation to Github Pages? This requires an empty Github repository. No

Sassを使って、Githubにはdeployしない設定を選択しました。


Gruntでサーバを起動します

C:\yeoman_test>grunt server
Running "server" task

Running "buildIndex" task

Running "sass:theme" (sass) task
Warning:
You need to have Ruby and Sass installed and in your PATH for this task to work.

More info: https://github.com/gruntjs/grunt-contrib-sass
 Use --force to continue.

Aborted due to warnings.

すると、RubyもSassもありませんよ　とアラートが出ます。RubyとSassをインストールします。

Rubyのインストール

http://rubyinstaller.org/downloads/
rubyinstaller-2.0.0-p481.exe　をインストール

C:\yeoman_test>ruby -v
ruby 2.0.0p481 (2014-05-08) [i386-mingw32]

Sassのインストール

C:\yeoman_test>gem install sass
Fetching: sass-3.4.0.gem (100%)
Successfully installed sass-3.4.0
Parsing documentation for sass-3.4.0
Installing ri documentation for sass-3.4.0
1 gem installed

再度、プロジェクトを作成して、Gruntでサーバを起動します

CC:\yeoman_test>yo reveal

C:\yeoman_test>grunt server
Running "server" task

Running "buildIndex" task

Running "sass:theme" (sass) task
File css/theme.css created.

Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9000

Running "watch" task
Waiting...

ブラウザが表示されます。

スライドショーの追加

別の管理者権限コマンドプロンプトを起動して、スライドを追加するコマンドを実行します。

CC:\yeoman_test>yo reveal:slide "slide title2" --markdown
     info Using Markdown.
     info Appending slides/slide-title2.md to slides/list.json.
   create slides\slide-title2.md

Watch（監視状態）のコマンドプロンプトで自動で処理が動きます。

>> File "slides\list.json" changed.
>> File "slides\slide-title2.md" added.
Running "buildIndex" task

Done, without errors.
Completed in 1.706s at Thu Aug 21 2014 16:28:07 GMT+0900 (東京 (標準時)) - Waiting...
>> File "index.html" changed.
Completed in 0.000s at Thu Aug 21 2014 16:28:07 GMT+0900 (東京 (標準時)) - Waiting...

ブラウザでスライドが追加されていることが確認できます。

公開するHTMLを生成します。

C:\yeoman_test>grunt dist

distフォルダに出力されたフォルダを公開するサーバにアップします。
完成したページはこちら

簡単にベースとなるテンプレートのファイル群が出来て、自動コンパイル、自動プレビューが出来るので、制作効率はとても良いと思います。