フロントエンド開発者のためのJenkins

4,317 views
4,076 views

Published on

Frontrend vol.6

0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,317
On SlideShare
0
From Embeds
0
Number of Embeds
1,358
Actions
Shares
0
Downloads
16
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

フロントエンド開発者のためのJenkins

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

×