Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,062 views

Published on

Frontrend vol.6

  • Be the first to comment

フロントエンド開発者のための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.

×