Subscribe via RSS Feed tettori Google+
2014年 08月 20日

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


20140819 yeoman

新規Webサイトを構築する際、jQueryや関連プラグイン、AngularやBootstrap等の自分好みのライブラリを予め組み込んだ状態でコーディングを始めるという方は少なく無いと思います。また、gulp, grunt等のタスクランナーの登場により、開発スタイルも劇的に変わりつつあります。今回はこれら自分好みの環境をぜんぶまとめてコマンド一発で準備してくれるとても便利なスキャフォルディング(足場組み)ツール「Yeoman」のご紹介です。

sponsored link

  1. Yeomanとgenerator
  2. 今回やろうとしていること
  3. 動作環境
  4. Yoのインストール
  5. generatorのインストール
  6. 動作確認
  7. 動画で確認
  8. 応用編
  9. もっと詳しく知りたい方へ

Yeomanとgenerator

Yeoman

node.jsベースで動くスキャフォルディングツールで、これまで手作業で組み込んでいたライブラリ郡や、Sassコンパイルの作業等を自動化するgruntやgulpのタスク設定を含めた自分好みの開発環境を簡単に生成することができます。

generator

生成することができる開発環境の元となるパッケージで、その数はサイトで確認できるだけでも既に数百種以上(2014/08/20現在)存在しています。

generatorはオフィシャルコミュニティで公開されていて、jQuery, bootstrap, angular等、主要なものはそこから入手できます。(ちなみにgeneratorは個別に開発する事も可能です。ご興味あるかたはコチラからどうぞ)

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

Yeomanとgeneretorをインストールした後で、yoコマンドを使ってスキャフォルディングを行います。

動作環境

  • バージョン0.8.0以上のnode.js
  • npm(node package manager)
node.jsとnpmのインストール方法について、以前テットリで取り上げていますので、よろしければご参考ください。
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キーを押して続けてください。 140825 0002 12

generatorのインストール方法

generatorはYeomanインストール時には含まれない為、必要なgeneratorを個別にインストールしていく事になります。ここではサンプルとして前回の記事で紹介したlivereloadをコマンドでインストールする方法をご紹介致します。
  1. ターミナルを起動して、以下のコマンドを順に実行します
  2. generator(gulp-livereload)をインストール
    npm install -g generator-gulp-livereload
  3. 任意の場所に新規プロジェクト用のディレクトリを作り移動します
    mkdir myproject
    cd myproject
  4. インストールしたgeneratorを使って関連ファイルを生成します
    yo gulp-livereload
  5. 追加する機能を選べるので、↑↓キー+スペースで選択/非選択の設定をしてEnterキーで決定します 140825 0003 2

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

動作確認

  1. gulpコマンドを実行します(ブラウザが起動しプレビューされます)
    gulp watch
  2. ブラウザが起動しプレビューされます 140825 0006 9

動画で確認

一連の手順をこちらの動画で確認できます。

応用編

その他、gulpで自動化設定済のgeneratorサンプルをご紹介します。
  • 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

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

Web開発の現場は初期のhtml, css, jsの構成から進化し、覚えるべきスキルも増えると同時に学習コストも増加しているので、Yeomanやタスクランナー等の面倒な手間を省けるツールは覚えておくと良いでしょう。モダンな開発環境を手軽に試せるメリットもYeomanならではの強みですね。テットリでは今後もYeomanをウォッチしていきたいと思います!


もしよろしければfacebookページのフォローをお願い致します!

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

Yeomanオフィシャル
The web’s scaffolding tool for modern webapps | Yeoman
Using Yeoman Finding Generators Creating a generator Contributing Blog THE WEB’S SCAFFOLDING TOOL F …
npm内でキーワード”generator”検索した結果が見れます。オフィシャルサイトで登録されていないgeneratorも探せます
nom: node package manager with ‘generator’ keyword


RSS登録はこちらからどうぞ

テットリでは主に開発者向けの情報を国内外から集めてまとめ記事にしたり、作成したお役立ちツール、たまに海外(現在ベルリン在住)での奮闘記なども公開していきます。

sponsored link

Filed in: 開発系