hiromitsuuuuu.log();

to see more to see.

第22回 GTUG Girls Meetup で YEOMAN触ってきた。

やっとゆっくりブログ書く余裕ができてきたので詰んでた勉強会メモを復習しながらお片付けしていくことにする。5/25(誕生日!w)は、GTUG GirlsのYeomanの会に行ってきた。

第22回 GTUG Girls Meetup 「YEOMANおじさんと過ごすステキな夜」

Ajenda

Ajendaはこんな感じ。3の途中の、NewRouter動かすところくらいまでやった。

  1. YEOMANインストール
  2. WebAppジェネレータの利用
  3. Bootstrap/Angular1.4/NewRouterベースのTodoリスト作成
  4. karma/jasmineを使った単体テスト

Yeomanインストール

Yeomanのインストールはこの記事を参考にしながらやってたみたい。 http://albatrosary.hateblo.jp/entry/2014/03/23/105356

nodebrewとnode入れて、

$ npm install -g yo grunt-cli bower

して、ジェネレーターでwebappしてる時くらいにやっと合流!←遅刻魔

generator-webapp

ジェネレーター周りはこの記事を参考に。

http://albatrosary.hateblo.jp/entry/2014/07/14/115028

ジェネレーター使うにはまずインストールが必要。ほいで、yo webapp するとbootstrapにする?Modernizrにする?とか聞かれるので選ぶ。そんで、grunt serveすると、勝手に初期ページが開く。

$ npm install -g generator-webapp
$ yo webapp
$ grunt serve

ネットワークが遅かったのか、grunt serveするときにやたらgruntのタスクが足りないとかnpmのエラーが出て、なかなか実行できなかった。何回かbower installとnpm installして解決した。

generator-angular

Angularベースのtodoアプリを作るために準備していく。まず、Angularのサイトに行って、bowerのコマンドをコピペしてくるよ。

bower install angular#1.4.0-rc.2 --save

bower.jsonにangularのバージョンが記録されて、bower_components/ 内にもangularのディレクトリができる。grunt serve すると、のところにangular本体が差し込まれた。wiredepが使われている。

Component用のディレクトリを作る

app ディレクトリ下に components ディレクトリを作る。今回は、about, contact, homeっていうディレクトリを作って、htmlとjsをそれぞれ作ってった。

スクリーンショット 2015-07-20 14.59.44.png

htmlをいじる

Angularだぜっていう宣言をする

<body ng-app="todos">

コンポーネントを表示する場所を作る

<div ng-viewport></div>

リンクをいじる

<li><a ng-link="home">Home</a></li>
<li><a ng-link="about">About</a></li>
<li><a ng-link="contact">Contact</a></li>

あとは、元々ジェネレーターで作ったひな形のhtmlに書かれていたheader〜footerの間のHTMLを削除して、home.htmlにコピペする。

angular-new-routerを使う

angular-new-routerはまだ開発サイクルに登録されてないので、以下の設定が必要だょ、とのこと。

  "overrides": {
    "angular-new-router": {
      "main": "dist/router.es5.js"
    }
  }

上の設定を書いておくと、インストールできる(書いて無いと bower install してもそんなのねぇよ!って言われる)

bower install angular-new-router --save 

今日は手打ちでやったけど、Controllerとかひな形を作ってくれるgenerator-angular もあるよ、今回やったのとはバージョンが違うので使えないけど…って言ってた。会社なんかで使うときは、ジェネレータをカスタマイズして他の開発者に提供したりする。コピペすれば済む話なので最近はYeomanどうなのという話があったりするけどって。

main.js にモジュールの読み込みを書く

(function () {

  'use strict';

  // ルーティングの定義をする
  function AppController () {}

  // angularにnew-routerを使うよっていう定義
  angular.module('todos', [  // module name. ng-app="todos" in html.
    'ngNewRouter',
    'todos.home',
    'todos.about',
    'todos.contact',
    ])
    .controller('AppController', [AppController]);

  // new-routerの定義
  AppController.$routeConfig = [
    { path: '/',       redirectTo: '/home' },
    { path: '/home',    component: 'home' },
    { path: '/about',   component: 'about' },
    { path: '/contact', component: 'contact' }
  ];
})();

grunt-injectorで開発効率をあげる

https://www.npmjs.com/package/grunt-injector

components/ 以下に作ったhome, contacts, about をコンポーネントとして自動的に差し込むためにgrunt-injectorを使う。

npm install grunt-injector --save-dev

Gruntの設定

Gruntfile.js のwiredepの下あたりにinjectorの設定を書く。

    injector: {
      options: {
        // Task-specific options go here. 
        transform: function(filePath) {
          filePath = filePath.replace('/app/', '');
          return '<script src="' + filePath + '"></script>';
        }
      },
      js: {
        // Target-specific file lists and/or options go here.
        files: {
          '<%= config.app %>/index.html': ['<%= config.app %>/components/{,*/}*.js', '<%= config.app %>/service/{,*/}*.js'],
        } 
      },
    },

serveのタスクの中にinjectorを入れる。

    grunt.task.run([
      'clean:server',
      'wiredep',
      'injector:js',
      'concurrent:server',
      'autoprefixer',
      'connect:livereload',
      'watch'
    ]);

htmlの中の、main.jsを読み込んでいる上当たりにinjectorでコンポーネントを差し込む場所を書く。grunt serveすると3つ分のコンポーネントが差し込まれる。

    <!-- injector:js -->
    <!-- endinjector -->

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->

各jsを書いていく

home.js, about.js, contact.jsにそれぞれControllerの定義を書いていく。

(function(){

    'use strict';

  function HomeController() {}

  angular.module('todos.home', [])
    .controller('HomeController', HomeController);

})();

jshintの設定を変える

このままだと実行した時に以下のようにangularないよ!って怒られるので…

  line 9  col 3  'angular' is not defined.

.jshintrc にグローバル定義する

  "globals" :{
    "angular": true
  }

routerが動いているか確認してみる!

grunt serve すると、home.htmlの中のhtmlが表示されるよ。タブを操作すると、abooutとcontactに切り替わる。

スクリーンショット 2015-07-20 16.37.28.png

まずはここまで

2時間ほどで、下準備が終了。TODOアプリを作る所までたどり着かなかったので、あとはGitHubに上がってるので勉強してね!とのこと。README.mdにだいたいやらなきゃいけないこと書いてくれてる。

https://github.com/albatrosary/Angular1.4oWebapp

いつもgruntだけでなんとかしてるのでYeoman触る機会が出来て良かった(((pq´ェ`*)