yeoman, grunt, bowerで静的サイト構築（第二回） - いつかは起業したいエンジニアのブログ

第二回の内容は下記です。

nvmを利用したnode.jsのインストール
yeomanのインストール
generator-mobileを利用してモバイル静的サイト構築用のプロジェクトの雛形作成

nvmを利用したnode.jsのインストール

nvmはnode及びnpmのバージョン管理マネージャーです。 nvmのインストール方法を紹介しているサイトでよく見かけるのは、ホームディレクトリ直下に.nvmディレクトリを生成して特定の個人環境にnvmをインストールするものですが、今回はシステム共通のnvmをインストールする方法をとりたいと思います。

nvm install

$ git clone https://github.com/creationix/nvm.git /usr/local/nvm

$ /usr/local/nvm/nvm.sh

これだけで、nvmが利用できるようになります。

node.js install

インストール可能なnode.jsのバージョンを確認します。

$ nvm ls-remote

インストールしたいバージョンを指定して、nvmコマンドを実行すればインストール完了です。

$ nvm install v0.11.9

複数のバージョンがインストールされている場合は、nvm use で利用するnodeのバージョンを変更できます。

※v0.11.9でyo mobileを実行してみたところ、インストールでエラーになりました。

※v0.8〜v0.10系で実行することをお勧めします。

※私はv0.10.24を利用しています。

$ nvm install v0.10.24

インストールされているバージョン一覧の表示。

$ nvm list

   v0.8.26
   v0.10.24
   v0.11.9

利用するバージョンの指定。

$ nvm use v0.10.24

バージョン確認。

$ node -v

v0.10.24

$ npm -v

1.3.21

サーバログイン時にnvmを自動設定

サーバログイン時に自動でnvmを実行できるようにしておくには、

$ /usr/local/nvm/nvm.sh

を実行する必要があります。各ログインユーザの.bashrcに設定しても良いのですが、ログインユーザ全員の.bashrcを編集するのも面倒なので、/etc/profile.d/nvm.shを作成し、ログイン時に自動実行するように設定します。

$ vi /etc/profile.d/nvm.sh

source /usr/local/nvm/nvm.sh
nvm use v0.10.24

以上でnode.jsを利用できる環境が構築できました。

yeoman install

$ npm i -g yo

以上です！

※npm 1.2.10以上で実行した場合は、grunt-cli及びbowerも同時にインストールされるので、個別にインストールする必要はありません。

generator install

今回は静的サイトの構築を目標にしているので、generator-mobileを利用したいと思います。

nasmがインストールされていないとエラーになるので、事前に確認してください。

$ yum list installed nasm

インストールされていない場合、nasmインストール

$ yum install nasm

generator-mobileインストール

$ npm i -g generator-mobile

generator-mobileを利用してプロジェクトの雛形の作成

適当にロジェクト用のディレクトリを切って、利用するgeneratorを指定して「yo」を実行するだけです。

$ mkdir -p /app/dev

$ cd /app/dev

$ yo mobile

フレームワーク使いますか？と聞かれるので、お好みのものを選択してEnter。

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
[?] Would you like to include a mobile-first UI framework? (Use arrow keys)
‣ No Framework 
  Twitter Bootstrap 
  PureCSS 
  TopCoat 
  Foundation

引き続き各種ライブラリ等について利用しますか？（y/n）と聞かれるので、お好みで選択していけばOKです。

後は、各種ファイルが展開され、bower install 及び npm install が実行されるので正常に終了するのを待つだけです。

[?] Would you like to include layout boilerplate for your selection? Yes
[?] Would you like to generate multi-resolution images for srcset? Yes
[?] Would you like to remove click delays in touch UIs (eg iOS)? Yes
[?] Would you like screenshots of your site at various viewport sizes? No
[?] Would you like to use BrowserStack for device testing? Yes
[?] Would you like to include RequireJS (for AMD support)? No
[?] Would you like to convert your images to WebP? Yes
[?] Would you like to include a polyfill for async localStorage? Yes
[?] Would you like to include boilerplate for the Fullscreen API? Yes
[?] Should builds only include Modernizr feature-detects you actually use? Yes
noframework was chosen
create Gruntfile.js
create package.json
create app/scripts/fastclick.js
create app/scripts/fastclick.example.js
create app/scripts/fullscreensnippet.js
create app/scripts/async.localStorage.js
create app/scripts/async.localStorage.examples.js
create .gitignore
create .gitattributes
create .bowerrc
create bower.json
create .jshintrc
create .editorconfig
create app/favicon.ico
create app/404.html
create app/robots.txt
create app/.htaccess
create app/styles/main.css
create app/index.html
create app/scripts/main.js
create app/scripts/hello.coffee
invoke mocha:app
create test/index.html
create test/lib/chai.js
create test/lib/expect.js
create test/lib/mocha/mocha.css
create test/lib/mocha/mocha.js
create test/spec/test.js

I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself.

以上で雛形の作成は完了です。

本来は動作確認まで記載したかったのですが、ruby及びgem compassをインストールしないと動作しないので次回に持ち越しです。