日々充実

毎日が充実したと思えるようになるためのブログ

【Yeoman】Cloud9 IDEにYeomanを入れてハマったところの話し 導入編

おはようございます、ヒサユキです!ヽ(=´▽`=)ノ

一昨日からちょいちょいFacebookTwitterで呟いてる、
Yeomanについて書いていこうと思います。

結構ハマって時間潰れたので、ホントはQiitaとかにあげたい。。。
あと、全体でYeomanってくくってますけど、
ハマったのはYoだけではないので/(^o^)\

Yeomanとは?

Webフロントエンドの構成をテンプレで保持していて、
コマンド一発でその構成を作ってくれるおっさんの事です。

構成

おっさんとトリとウシで出来てます。

【YO】
f:id:yuki_hisa:20170303200736p:plain
【bower】
f:id:yuki_hisa:20170303200946p:plain
【Grunt】
f:id:yuki_hisa:20170303200723p:plain

Cloud9で導入

相変わらずCloud9使ってるんですが、ターミナルがあるので以外と簡単にいけます。
また、npmnode.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の実行

実行前の画面はこんなかんじ
f:id:yuki_hisa:20170304001239p:plain

ここでコマンドを入力して、質問に答えていくと・・・

$ 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

こんな感じになります! f:id:yuki_hisa:20170304004421p:plain

コマンド一つであっという間にこれだけの構成が完成します。

ハマった所

Node.jsのバージョン

もはや、Yeomen以前の問題ですが・・・w
初期設定でHTML5を選んだときにやったやり方を残しておいで、
HTML5設定のデフォルトファイルが何もいらなかったのでブランクを選んだら 上手くいかないという・・・・w

ハマったと言っても、割りとすぐ気づいたのでそこまで大変ではなかったです。

Gruntどこいった?

ここまでのやり方で途中Gruntのインストールはしませんでした。
あとでその理由を書くといいましたが・・・
実は今のgenerator-WebAppではGrunt使わないんです/(^o^)\

ただ、Yeomanの解説が乗ってるサイトとか調べてると、
大概Grunt使ってるんですね。
そして思い込みの決定打になったのがこのサイト

c9.io

clou9 IDEにYeomanをインストールする方法という
あまりにクリティカルな内容で鵜呑みにしました。

ほんと、この通りやってたら

「あれ?Gruntgile.js出来ないんだけど・・・・」

なんか代わりにGulpfile.jsとか出来てるよ?そもそもGulpってなんよ・・・?

Yeomanのページ調べていくと・・・ f:id:yuki_hisa:20170304014826p:plain

この一文

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を落としてきている。

ということは・・・・

f:id:yuki_hisa:20170304090050j:plain

こうなったわけですね・・・(;´∀`)
Gruntさんがお役御免になったと・・・

というわけで、Gulpの操作でないと使えなくなっていますが、
コマンド自体はそこまで変化がないので割りとすんなりいけました。

Cloud9 IDE特有の設定

Gruntがない件に紐づくのですが、このサイト c9.io

ホスト名を変更しないといけないと書かれていますが、
Gulpfile.jsにはホスト名を記載している場所がありません。

なので、ポート番号の変更のみが必要でした。
ハマったってほどではないけどポート番号だけでいけるかな〜?
って感じでやったら出来たパターンです。

まとめ

ここまではとりあえず導入と設定までです。
このあとbowerとgulpの連携でまたハマりますが、
それはまた別途書きます。

ハマりはしましたがおっさんもbowerも便利ですし、
grunt使ったことなかったので、普通にgulpの便利さに驚いてます。