Web制作の現場が劇的に変わる!Yeomanを使った爆速スキャフォルディング
sponsored link
新規Webサイトを構築する際、jQueryや関連プラグイン、AngularやBootstrap等の自分好みのライブラリを予め組み込んだ状態でコーディングを始めるという方は少なく無いと思います。また、gulp, grunt等のタスクランナーの登場により、開発スタイルも劇的に変わりつつあります。今回はこれら自分好みの環境をぜんぶまとめてコマンド一発で準備してくれるとても便利なスキャフォルディング(足場組み)ツール「Yeoman」のご紹介です。
sponsored link
Yeomanとgenerator
Yeoman
node.jsベースで動くスキャフォルディングツールで、これまで手作業で組み込んでいたライブラリ郡や、Sassコンパイルの作業等を自動化するgruntやgulpのタスク設定を含めた自分好みの開発環境を簡単に生成することができます。
generator
生成することができる開発環境の元となるパッケージで、その数はサイトで確認できるだけでも既に数百種以上(2014/08/20現在)存在しています。
generatorはオフィシャルとコミュニティで公開されていて、jQuery, bootstrap, angular等、主要なものはそこから入手できます。(ちなみにgeneratorは個別に開発する事も可能です。ご興味あるかたはコチラからどうぞ)
今回やろうとしていること
Yeomanとgeneretorをインストールした後で、yoコマンドを使ってスキャフォルディングを行います。
動作環境
node.jsとnpmのインストール方法について、以前テットリで取り上げていますので、よろしければご参考ください。
gitを使ったnvm(node version manager)のインストールから複数バージョンのnode.jsインストール及びその切替え手順のご紹介です。
Tettori 開発者向け。国内・海外から旬な情報をお届けします:テットリ Top News Designer Developer Other About 2014年 08月 9日 gitを使ったnv …Yeomanのインストール方法
npm update -g npm
npm install -g yo
yo -v
yoコマンド初めて実行する時は下のような内容が表示されるので、そのままEnterもしくはNキーを押して続けてください。
generatorのインストール方法
generatorはYeomanインストール時には含まれない為、必要なgeneratorを個別にインストールしていく事になります。ここではサンプルとして前回の記事で紹介したlivereloadをコマンドでインストールする方法をご紹介致します。
npm install -g generator-gulp-livereload
mkdir myproject
cd myprojectyo gulp-livereload
以上です。
インストールに時間がかかっているように見えるときは…
インストール中にスクロールせず止まっているように見える場合があります。これはyoで使われているbowerというヘルパーソフトを初めて起動する際に現れる現象で、キー入力待ちの表示が出ないまま待機状態に入ってしまいます。その場合はEnter等のキーを押してみると処理が続行されるので、疑わしい場合は試してみてください。
Enterを押してみると…
動作確認
gulp watch
動画で確認
一連の手順をこちらの動画で確認できます。
応用編
その他、gulpで自動化設定済のgeneratorサンプルをご紹介します。
html,css,jsの更新状況を監視し、保存と同時にブラウザ更新
sassファイルの更新状況を監視し、保存と同時にcss変換を行いブラウザ更新
npm install -g generator-gulp-sass-livereload
html,css,jsの更新状況を監視し、保存と同時にブラウザ更新
sassファイルの更新状況を監視し、保存と同時にcss変換を行いブラウザ更新
ts(typescript)ファイルの更新状況を監視し、保存と同時にjsコンパイルを行いブラウザ更新
npm install -g generator-gulp-sass-typescript
いかがでしたでしょうか?
Web開発の現場は初期のhtml, css, jsの構成から進化し、覚えるべきスキルも増えると同時に学習コストも増加しているので、Yeomanやタスクランナー等の面倒な手間を省けるツールは覚えておくと良いでしょう。モダンな開発環境を手軽に試せるメリットもYeomanならではの強みですね。テットリでは今後もYeomanをウォッチしていきたいと思います!
もしよろしければfacebookページのフォローをお願い致します!
もっと詳しく知りたい方へ
Yeomanオフィシャル
npm内でキーワード”generator”検索した結果が見れます。オフィシャルサイトで登録されていないgeneratorも探せます
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
RSS登録はこちらからどうぞ
テットリでは主に開発者向けの情報を国内外から集めてまとめ記事にしたり、作成したお役立ちツール、たまに海外(現在ベルリン在住)での奮闘記なども公開していきます。
sponsored link
購読はこちらからどうぞ