フロントエンド開発者のためのjenkins
DESCRIPTION
Frontrend vol.6TRANSCRIPT
2013/11/16 Hiroyuki SATAKE
フロントエンド開発者のためのJenkins
●佐竹 裕行
●JavaScript
●@st44100
TAGLY
●タグでつながる写真共有サービス
●iOS / Android
TAGLY
●タグでつながる写真共有サービス
●iOS / Android
旅Photo ぷらり
●旅写真でつながるSNS
●iPhone / Android
旅Photo ぷらり
●旅写真でつながるSNS
●iPhone / Android
Jenkinsとフロント開発
●Jenkinsとは
●Jenkinsでビルド
●Jenkinsでテスト
●単体テスト
●統合テスト
●Jenkinsでドキュメント
Jenkins
http://jenkins-ci.org/
Jenkins
“An extendable open source continuous integration server”
“拡張可能なオープンソースの
継続インテグレーションサーバ”
http://ja.wikipedia.org/wiki/継続的インテグレーション
CIとは
継続的インテグレーション、CI（英: continuous integration）とは、主にプログラマーのアプリケーション作成時の品質改善や納期の短縮のための習慣のこ
とである。
エクストリーム・プログラミング (XP) のプラクティスの一つで、狭義にはビルドやテスト、インスペクションなどを継続的に実行していくことを意味する[1]。
Server...
Continuos Integration...
●ビルド
●テスト
●常に動くものを作って、検証を繰り返す
�
�����
�����
Commit → Test →Build
● フロントエンドのコードのビルド
● JavaScript
● compile, concat, minify
● CSS
● compile, minify, CSS Sprite
● Image
● Optimize, CSS Sprite
1.作業の開発本線へのコミット
2.Jenkinsがソースコードチェックアウト
3.テスト/ビルドをJenkinsが実行
●Jenkinsの準備
●自分でインストール
●CloudBees
● Install Jenkins
● Install node / npm
● Install Ruby / Bundler
Install Jenkins
$ brew install jenkins
$ java -jar \/usr/local/opt/jenkins/libexec/jenkins.war
Install Jenkins
●node/npm (grunt, etc)
●ruby (compass, etc)
●レポジトリの登録
●認証系の設定
BUILD
プロジェクト画面
成果物
TEST
●テストする
●単体テスト(Jasmine)
●統合テスト(CasperJS)
●単体テスト
●Jasmine
●PhantomJS
$ grunt test
Jenkins上で
●統合テスト
●Casper JS
DOCUMENT
●ドキュメント生成
●JS Documentation
●StyleGuide
ドキュメント生成
CATCH REGRESSION
BBC-News/wraith
●BBC制作
●画像のDiffをとれる。
●Ruby
●ImageMagick
●おそい。
facebook/huxley
●facebook(Instagram)
●python(Instagram)
Huddle/PhantomCSS
●Huddle製
●Casper JSのモジュール
●フロントエンドだけでも使える
●テスト
●ドキュメンテーション
●定期的なマークアップ崩れ確認
Thank you.