【Yeoman】Cloud9 IDEにYeomanを入れてハマったところの話し 導入編
おはようございます、ヒサユキです!ヽ(=´▽`=)ノ
一昨日からちょいちょいFacebookやTwitterで呟いてる、
Yeomanについて書いていこうと思います。
結構ハマって時間潰れたので、ホントはQiitaとかにあげたい。。。
あと、全体でYeomanってくくってますけど、
ハマったのはYoだけではないので/(^o^)\
Yeomanとは?
Webフロントエンドの構成をテンプレで保持していて、
コマンド一発でその構成を作ってくれるおっさんの事です。
構成
おっさんとトリとウシで出来てます。
【YO】
【bower】
【Grunt】
Cloud9で導入
相変わらずCloud9使ってるんですが、ターミナルがあるので以外と簡単にいけます。
また、npmとnode.jsを仕様しますがデフォルトで入ってるので、
別途入れる必要は特に無いです。
ただし、Cloud9の初期設定でHTML5を選んだ場合と、ブランクを選んだ場合で
node.jsのバージョンが違ったので少しハマりました。
Yoemanインストール
npmを最新化
npm update -g npm
Node.jsのバージョンチェック
node -v
ここでチェックしたバージョンを次のコマンドで使います。
今回は仮にv4.7.2だったとして進めます。
NODE_PATHの書き換え
echo "export NODE_PATH=$NODE_PATH:/home/ubuntu/.nvm/versions/node/v4.7.2/lib/node_modules" >> ~/.bashrc && source ~/.bashrc
.bashrcにNODE_PATHの上書きするための行を追加します。
ファイルパス内のv4.7.2は先程確認したNode.jsのバージョンに変えます。
これをやっておかないと、npmでインストールした時に最後でコケます。
npmでインストール
npm install -g yo bower
yoとbowerをインストール、gruntが無いのは最後の節で書きます。
Yeoman Doctor Running sanity checks on your system ✔ Global configuration file is valid ✔ Node.js version ✔ No .bowerrc file in home directory ✔ No .yo-rc.json file in home directory ✔ npm version ✔ NODE_PATH matches the npm root
こんな感じになればYoのインストールは完了。
bower -v 1.8.0
bowerもインストール完了です。
generatorのインストール
Yoの用意している構成テンプレートのことをgeneratorと呼びます。
こちらもnpmでインストールするのですが、沢山あります(;´∀`)
こちらから、どんなテンプレートがあるかは検索可能
Generators | Yeoman
今回はフロント開発なのでWebappというgeneratorをインストールします。
npm install -g generator-webapp
Yoの実行
実行前の画面はこんなかんじ
ここでコマンドを入力して、質問に答えていくと・・・
$ yo webapp ? ========================================================================== We're constantly looking for ways to make yo better! May we anonymously report usage statistics to improve the tool over time? More info: https://github.com/yeoman/insight & http://yeoman.io ========================================================================== Yes _-----_ ╭──────────────────────────╮ | | │ 'Allo 'allo! Out of the │ |--(o)--| │ box I include HTML5 │ `---------´ │ Boilerplate, jQuery, and │ ( _´U`_ ) │ a gulpfile to build your │ /___A___\ /│ app. │ | ~ | ╰──────────────────────────╯ __'.___.'__ ´ ` |° ´ Y ` ? Which additional features would you like to include? (Press <space> to select, <a> to toggle all, <i> to inverse selection)Sass, B ootstrap, Modernizr ? Which version of Bootstrap would you like to include? Bootstrap 4 ? Choose your style of DSL TDD create bower.json create package.json create gulpfile.js create .babelrc create .gitignore create .gitattributes create .bowerrc create .editorconfig create app/favicon.ico create app/apple-touch-icon.png create app/robots.txt create app/styles/main.scss create app/scripts/main.js create app/index.html create test/spec/test.js create test/index.html I'm all done. Running npm install && bower install for you to install the required dependencies. If this fails, try running the command yourself.
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"}) bower bootstrap#~4.0.0-alpha.6 not-cached https://github.com/twbs/bootstrap.git#~4.0.0-alpha.6 bower bootstrap#~4.0.0-alpha.6 resolve https://github.com/twbs/bootstrap.git#~4.0.0-alpha.6 bower modernizr#~2.8.1 not-cached https://github.com/Modernizr/Modernizr.git#~2.8.1 bower modernizr#~2.8.1 resolve https://github.com/Modernizr/Modernizr.git#~2.8.1 bower modernizr#~2.8.1 download https://github.com/Modernizr/Modernizr/archive/v2.8.3.tar.gz bower bootstrap#~4.0.0-alpha.6 download https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.6.tar.gz bower modernizr#~2.8.1 extract archive.tar.gz bower modernizr#~2.8.1 resolved https://github.com/Modernizr/Modernizr.git#2.8.3 bower bootstrap#~4.0.0-alpha.6 extract archive.tar.gz bower bootstrap#~4.0.0-alpha.6 resolved https://github.com/twbs/bootstrap.git#4.0.0-alpha.6 bower tether#^1.4.0 not-cached https://github.com/HubSpot/tether.git#^1.4.0 bower tether#^1.4.0 resolve https://github.com/HubSpot/tether.git#^1.4.0 bower jquery#>=1.9.1 not-cached https://github.com/jquery/jquery-dist.git#>=1.9.1 bower jquery#>=1.9.1 resolve https://github.com/jquery/jquery-dist.git#>=1.9.1 bower jquery#>=1.9.1 download https://github.com/jquery/jquery-dist/archive/3.1.1.tar.gz bower tether#^1.4.0 download https://github.com/HubSpot/tether/archive/v1.4.0.tar.gz bower tether#^1.4.0 extract archive.tar.gz bower jquery#>=1.9.1 extract archive.tar.gz bower tether#^1.4.0 resolved https://github.com/HubSpot/tether.git#1.4.0 bower jquery#>=1.9.1 resolved https://github.com/jquery/jquery-dist.git#3.1.1 bower modernizr#~2.8.1 install modernizr#2.8.3 bower bootstrap#~4.0.0-alpha.6 install bootstrap#4.0.0-alpha.6 bower tether#^1.4.0 install tether#1.4.0 bower jquery#>=1.9.1 install jquery#3.1.1 modernizr#2.8.3 bower_components/modernizr bootstrap#4.0.0-alpha.6 bower_components/bootstrap ├── jquery#3.1.1 └── tether#1.4.0 tether#1.4.0 bower_components/tether jquery#3.1.1 bower_components/jquery bower chai#* not-cached https://github.com/chaijs/chai.git#* bower chai#* resolve https://github.com/chaijs/chai.git#* bower mocha#* not-cached https://github.com/mochajs/mocha.git#* bower mocha#* resolve https://github.com/mochajs/mocha.git#* bower chai#* download https://github.com/chaijs/chai/archive/3.5.0.tar.gz bower mocha#* download https://github.com/mochajs/mocha/archive/v3.2.0.tar.gz bower chai#* extract archive.tar.gz bower chai#* resolved https://github.com/chaijs/chai.git#3.5.0 bower mocha#* extract archive.tar.gz bower mocha#* resolved https://github.com/mochajs/mocha.git#3.2.0 bower chai#^3.5.0 install chai#3.5.0 bower mocha#^3.2.0 install mocha#3.2.0 chai#3.5.0 bower_components/chai mocha#3.2.0 bower_components/mocha
こんな感じになります!
コマンド一つであっという間にこれだけの構成が完成します。
ハマった所
Node.jsのバージョン
もはや、Yeomen以前の問題ですが・・・w
初期設定でHTML5を選んだときにやったやり方を残しておいで、
HTML5設定のデフォルトファイルが何もいらなかったのでブランクを選んだら
上手くいかないという・・・・w
ハマったと言っても、割りとすぐ気づいたのでそこまで大変ではなかったです。
Gruntどこいった?
ここまでのやり方で途中Gruntのインストールはしませんでした。
あとでその理由を書くといいましたが・・・
実は今のgenerator-WebAppではGrunt使わないんです/(^o^)\
ただ、Yeomanの解説が乗ってるサイトとか調べてると、
大概Grunt使ってるんですね。
そして思い込みの決定打になったのがこのサイト
clou9 IDEにYeomanをインストールする方法という
あまりにクリティカルな内容で鵜呑みにしました。
ほんと、この通りやってたら
「あれ?Gruntgile.js出来ないんだけど・・・・」
なんか代わりにGulpfile.jsとか出来てるよ?そもそもGulpってなんよ・・・?
Yeomanのページ調べていくと・・・
この一文
The Build System is used to build, preview and test your project. Gulp and Grunt are two popular options.
なんか、ビルドツールは使うけど、GulpでもGruntでもどっちでもいいよみたいな感じ。
とりあえずGulpはビルドツールだってことはわかった
更に調べていくと・・・
[package.json]
{ "private": true, "engines": { "node": ">=4" }, "devDependencies": { "babel-core": "^6.4.0", "babel-preset-es2015": "^6.3.13", "babel-register": "^6.5.2", "browser-sync": "^2.2.1", "del": "^2.2.0", "gulp": "^3.9.0", "gulp-autoprefixer": "^3.0.1", "gulp-babel": "^6.1.1", "gulp-cache": "^0.4.2", "gulp-cssnano": "^2.0.0", "gulp-eslint": "^3.0.0", "gulp-filter": "^4.0.0", "gulp-htmlmin": "^3.0.0", "gulp-if": "^2.0.2", "gulp-imagemin": "^3.0.1", "gulp-load-plugins": "^1.2.4", "gulp-plumber": "^1.0.1", "gulp-sass": "^2.0.0", "gulp-size": "^2.1.0", "gulp-sourcemaps": "^2.2.0", "gulp-uglify": "^2.0.0", "gulp-useref": "^3.0.0", "main-bower-files": "^2.5.0", "run-sequence": "^1.2.2", "wiredep": "^4.0.0" }, "eslintConfig": { "env": { "es6": true, "node": true, "browser": true }, "rules": { "quotes": [ 2, "single" ] } } }
Yoがpackage.jsonにあるLibraryを拾ってくるわけですが、
どうみてもGruntが居なくて、Gulpを落としてきている。
ということは・・・・
こうなったわけですね・・・(;´∀`)
Gruntさんがお役御免になったと・・・
というわけで、Gulpの操作でないと使えなくなっていますが、
コマンド自体はそこまで変化がないので割りとすんなりいけました。
Cloud9 IDE特有の設定
Gruntがない件に紐づくのですが、このサイト c9.io
ホスト名を変更しないといけないと書かれていますが、
Gulpfile.jsにはホスト名を記載している場所がありません。
なので、ポート番号の変更のみが必要でした。
ハマったってほどではないけどポート番号だけでいけるかな〜?
って感じでやったら出来たパターンです。
まとめ
ここまではとりあえず導入と設定までです。
このあとbowerとgulpの連携でまたハマりますが、
それはまた別途書きます。
ハマりはしましたがおっさんもbowerも便利ですし、
grunt使ったことなかったので、普通にgulpの便利さに驚いてます。