フロントエンド自動化入門

HTML5NAGOYA #14 の資料です。

Gulpの導入

1. グローバル空間へgulpをインストールする

npm install -g gulp

ローカルマシン内でgulpコマンドを使えるようになる。

2. プロジェクト内のdevDependenciesにgulpをインストールする

npm install --save-dev gulp

3. gulpfile.jsまたはgulpfile.coffeeをプロジェクトルートに作成する

var gulp = require('gulp');

gulp.task('default', function() {
  // defaultタスクの処理
});

gulp = require 'gulp'

gulp.task 'default', ->
  # defaultタスクの処理

4. gulpを実行する

gulp

defaultタスクは何も指定していと実行されます。
default以外で登録されたタスクは、gulp <task> <othertask>という感じで実行できます。

プラグイン

ググってもいいし、公式ページの検索を利用してもいい
http://gulpjs.com/plugins/

Q. あれ、◯◯なプラグインがないんじゃない？
A. なんか理由があってブラックリスト入りしてるかも

Selenium Webdriverの導入

1. インストール

Rubyに本体に付属して標準で入っているモジュールのgemでインストールする
gem install selenium-webdriver

2. テストの記述

ファイル名はなんでも良い。ここではひとまずtest.rbとしておく

require "selenium-webdriver"

driver = Selenium::WebDriver.for :firefox
driver.navigate.to "http://google.com"

element = driver.find_element(:name, 'q')
element.send_keys "Hello WebDriver!"
element.submit

puts driver.title

driver.quit

3. テストの実行

作成したrubyファイルと同階層でruby test.rbを実行する。

Karmaの導入

1. Karmaのインストール

npm install -g karma

2. 設定ファイルを作成する

karma init

テストフレームワークは何にするか、Require.js使う？ブラウザどうする？みたいなことを聞いてきます。

3. karma.confについて

• basePath: ベースとなるパス
• frameworks: Karmaで利用するフレームワーク（必要に応じてnpm installしてください）
• files: ブラウザに読み込ませるファイルリスト、またはそのパターン
• reporters: テストのレポーターに使用するモジュール一覧
• port: Karmaサーバで使用するポート番号
• logLevel: 出力されるログレベルの設定
• autoWatch: ファイルの自動監視
• browsers: テストに利用するブラウザ（必要に応じてnpm installしてください）
• singleRun: trueにすると、1度テストが実行されると終了します

4. karmaを実行してみる

karma startでKarmaが立ち上がります。テストコードがあればテストが走ります。

describe '■■■■ タイトルのテスト ■■■■', ->

  it 'タイトルが等しいこと', ->
    title = 'hoge'
    expect(title).to.equal 'hoge'

---

参考:
https://github.com/gulpjs/gulp
https://code.google.com/p/selenium/wiki/RubyBindings
http://karma-runner.github.io/0.12/index.html