LoginSignup
8
8

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-08-08

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

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
8