Web制作の現場が劇的に変わる！Yeomanを使った爆速スキャフォルディング

Yeomanとgenerator

Yeoman

generator

今回やろうとしていること

動作環境

• バージョン0.8.0以上のnode.js
• npm(node package manager)

gitを使ったnvm(node version manager)のインストールから複数バージョンのnode.jsインストール及びその切替え手順のご紹介です。 Tettori 開発者向け。国内・海外から旬な情報をお届けします：テットリ Top News Designer Developer Other About 2014年 08月 9日 gitを使ったnv …

Yeomanのインストール方法

1. ターミナルを起動し、以下のコマンドを順に実行します
2. npmをアップデート

   npm update -g npm

3. yeoman(yo)のインストール

   npm install -g yo

4. バージョン確認（バージョン番号が表示されれば動作確認済です)

   yo -v

   
   yoコマンド初めて実行する時は下のような内容が表示されるので、そのままEnterもしくはNキーを押して続けてください。

generatorのインストール方法

1. ターミナルを起動して、以下のコマンドを順に実行します
2. generator(gulp-livereload)をインストール

   npm install -g generator-gulp-livereload

3. 任意の場所に新規プロジェクト用のディレクトリを作り移動します

   mkdir myproject
   cd myproject

4. インストールしたgeneratorを使って関連ファイルを生成します

   yo gulp-livereload

5. 追加する機能を選べるので、↑↓キー＋スペースで選択/非選択の設定をしてEnterキーで決定します



インストールに時間がかかっているように見えるときは…

インストール中にスクロールせず止まっているように見える場合があります。これはyoで使われているbowerというヘルパーソフトを初めて起動する際に現れる現象で、キー入力待ちの表示が出ないまま待機状態に入ってしまいます。その場合はEnter等のキーを押してみると処理が続行されるので、疑わしい場合は試してみてください。 Enterを押してみると…

以上です。

動作確認

1. gulpコマンドを実行します（ブラウザが起動しプレビューされます）

   gulp watch

2. ブラウザが起動しプレビューされます

動画で確認

応用編

• livereload + sass
  html,css,jsの更新状況を監視し、保存と同時にブラウザ更新
  sassファイルの更新状況を監視し、保存と同時にcss変換を行いブラウザ更新

  npm install -g generator-gulp-sass-livereload

  
  
• livereload + sass + typescript
  html,css,jsの更新状況を監視し、保存と同時にブラウザ更新
  sassファイルの更新状況を監視し、保存と同時にcss変換を行いブラウザ更新
  ts(typescript)ファイルの更新状況を監視し、保存と同時にjsコンパイルを行いブラウザ更新

  npm install -g generator-gulp-sass-typescript

いかがでしたでしょうか？

もっと詳しく知りたい方へ

The web’s scaffolding tool for modern webapps | Yeoman Using Yeoman Finding Generators Creating a generator Contributing Blog THE WEB’S SCAFFOLDING TOOL F …

nom: node package manager with ‘generator’ keyword