Frontrend vol.6

1. フロントエンド開発者の
ためのJenkins
2013/11/16 Hiroyuki SATAKE

2. ● 佐竹 裕行
● JavaScript
● @st44100

3. TAGLY
● タグでつながる写真共有
サービス
● iOS / Android

4. TAGLY
● タグでつながる写真共有
サービス
● iOS / Android

5. 旅Photo ぷらり
● 旅写真でつながるSNS
● iPhone / Android

6. 旅Photo ぷらり
● 旅写真でつながるSNS
● iPhone / Android

7. パシャっとmyペット
● 国内最大級のペット写真SNS
● iPhone / Android
● http://petpic.jp

8. Jenkinsとフロント開発
● Jenkinsとは
● Jenkinsでビルド
● Jenkinsでテスト
● 単体テスト
● 統合テスト
● Jenkinsでドキュメント

9. Jenkins

10. Jenkins
“An extendable open source
continuous integration server”
“拡張可能なオープンソースの
継続インテグレーションサーバ”
http://jenkins-ci.org/

11. CIとは
継続的インテグレーション、CI（英: continuous
integration）とは、主にプログラマーのアプリケーシ
ョン作成時の品質改善や納期の短縮のための習慣のこ
とである。
エクストリーム・プログラミング (XP) のプラクティス
の一つで、狭義にはビルドやテスト、インスペクショ
ンなどを継続的に実行していくことを意味する[1]。
http://ja.wikipedia.org/wiki/継続的インテグレーション

12. Server...

13. Continuos
Integration...

14. ● ビルド
● テスト
● 常に動くものを作って、検証を繰り返す

15. Commit → Test →Build

16. ● フロントエンドのコードのビルド
● JavaScript
● compile, concat, minify
● CSS
● compile, minify, CSS Sprite
● Image
● Optimize, CSS Sprite

17. 1.作業の開発本線へのコミット
2.Jenkinsがソースコードチェックアウト
3.テスト/ビルドをJenkinsが実行

18. ● Jenkinsの準備
● 自分でインストール
● CloudBees

19. Install Jenkins
●
Install Jenkins
●
Install node / npm
●
Install Ruby / Bundler

20. Install Jenkins
$ brew install jenkins
$ java -jar
/usr/local/opt/jenkins/libexec/jenkins.war

21. ● node/npm
● ruby
(grunt, etc)
(compass, etc)
● レポジトリの登録
● 認証系の設定

22. BUILD

23. プロジェクト画面

24. 成果物

25. TEST

26. ● テストする
● 単体テスト(Jasmine)
● 統合テスト(CasperJS)

27. ● 単体テスト
● Jasmine
● PhantomJS

28. $ grunt test

29. Jenkins上で

31. ● 統合テスト
● Casper JS

32. DOCUMENT

33. ● ドキュメント生成
● JS Documentation
● StyleGuide

34. ドキュメント生成

35. CATCH REGRESSION

36. BBC-News/wraith
● BBC制作
● 画像のDiffをとれる。
● Ruby
● ImageMagick
● おそい。

37. facebook/huxley
● facebook(Instagram)
● python(Instagram)

38. Huddle/PhantomCSS
● Huddle製
● Casper JSのモジュール

39. ● フロントエンドだけでも使える
● テスト
● ドキュメンテーション
● 定期的なマークアップ崩れ確認

40. Thank you.