by tonytonyjan rubyconf taiwan 2015 1
play

by#@tonytonyjan @"RubyConf"Taiwan,"2015 1 - PowerPoint PPT Presentation

by#@tonytonyjan @"RubyConf"Taiwan,"2015 1 @"RubyConf"Taiwan,"2015 2 @"RubyConf"Taiwan,"2015 3 tonytonyjan


  1. �������� by#@tonytonyjan @"RubyConf"Taiwan,"2015 1

  2. ������� @"RubyConf"Taiwan,"2015 2

  3. @"RubyConf"Taiwan,"2015 3

  4. �� ��� tonytonyjan @"RubyConf"Taiwan,"2015 4

  5. �� !@tonytonyjan • ��� "#"Ziltag • ��� "#" ����� • �� "#"Ruby"on"Rails" ���� • �� "#"jaro_winkler,"exif,"xdite"gem,"etc • �� "#"ConFoo"2015 • �� "#"Ruby"Kaigi"2014 @"RubyConf"Taiwan,"2015 5

  6. �� • C • Ruby • Rails • C+Extension • JavaScript • CSS @"RubyConf"Taiwan,"2015 6

  7. �� @"RubyConf"Taiwan,"2015 7

  8. ���� �������� • ���� • � "Rails" �������� • �� "JS" ����� "Rails" ��� @"RubyConf"Taiwan,"2015 8

  9. �������� @"RubyConf"Taiwan,"2015 9

  10. ������� !(1/4) <head> <link rel="stylesheet" href="aaa.css"> <link rel="stylesheet" href="bbb.css"> <link rel="stylesheet" href="ccc.css"> <script src="aaa.js"></script> <script src="bbb.js"></script> <script src="ccc.js"></script> </head> @"RubyConf"Taiwan,"2015 10

  11. HTTP$ ���� @"RubyConf"Taiwan,"2015 11

  12. ������� !(2/4) Conca&na&on ex.$ cat *.js <head> <link rel="stylesheet" href="all.css"> <script src="all.js"></script> </head> @"RubyConf"Taiwan,"2015 12

  13. ���� @"RubyConf"Taiwan,"2015 13

  14. ������� !(3/4) Compression ex.$YUI$Compressor <head> <link rel="stylesheet" href="all.min.css"> <script src="all.min.js"></script> </head> @"RubyConf"Taiwan,"2015 14

  15. ����� @"RubyConf"Taiwan,"2015 15

  16. ������� !(4/4) �������� <head> <link rel="stylesheet" href="all.min.css?v2"> <script src="all.min.js?v3"></script> </head> @"RubyConf"Taiwan,"2015 16

  17. �� !debug @"RubyConf"Taiwan,"2015 17

  18. ������ !Source!Map! ��� @"RubyConf"Taiwan,"2015 18

  19. @"RubyConf"Taiwan,"2015 19

  20. @"RubyConf"Taiwan,"2015 20

  21. QQ @"RubyConf"Taiwan,"2015 21

  22. ������� � 2011$ ��� @"RubyConf"Taiwan,"2015 22

  23. ����������� @"RubyConf"Taiwan,"2015 23

  24. ���� @"RubyConf"Taiwan,"2015 24

  25. Rails&3.1 ��� !Assets!Pipeline @"RubyConf"Taiwan,"2015 25

  26. Sprockets @"RubyConf"Taiwan,"2015 26

  27. Sprockets* ����� *(1/4) Transform @"RubyConf"Taiwan,"2015 27

  28. Sprockets* ����� *(2/4) Concat'&'Compress @"RubyConf"Taiwan,"2015 28

  29. Sprockets* ����� *(3/4) Digest @"RubyConf"Taiwan,"2015 29

  30. Sprockets* ����� *(4/4) Javascript*Templa/ng <!-- templates/hello.jst.ejs --> <div>Hello, <span><%= name %></span>!</div> // application.js //= require templates/hello $("#hello").html(JST["templates/hello"]({ name: "Sam" })); @"RubyConf"Taiwan,"2015 30

  31. @"RubyConf"Taiwan,"2015 31

  32. ����� @"RubyConf"Taiwan,"2015 32

  33. ������ @"RubyConf"Taiwan,"2015 33

  34. ���������� @"RubyConf"Taiwan,"2015 34

  35. ������ • �� "TypeScript" �� "CoffeeScript • �� "LESS" �� "SASS • �� "ReactJS" � "Polymer" �� "JST • ��� "bower" ������������ "gem • ���� "Mocha � Jasmine" ��� @"RubyConf"Taiwan,"2015 35

  36. ������� !gem! ����� @"RubyConf"Taiwan,"2015 36

  37. TypeScript*+>*typescript+rails LESS$%>$less%rails ReactJS()>(react)rails @"RubyConf"Taiwan,"2015 37

  38. rails&assets.org @"RubyConf"Taiwan,"2015 38

  39. Gemfile source 'https://rails-assets.org' do # gem "rails-assets-#{BOWER_PKG_NAME}" gem 'rails-assets-bootstrap' gem 'rails-assets-angular' gem 'rails-assets-leaflet' end @"RubyConf"Taiwan,"2015 39

  40. ���� !gem � @"RubyConf"Taiwan,"2015 40

  41. ����� ! vendor/assets/ @"RubyConf"Taiwan,"2015 41

  42. �� !gem! ��� bootstrap(gem( � (3( ��� @"RubyConf"Taiwan,"2015 42

  43. �� !gem! �� �� !gem! �� @"RubyConf"Taiwan,"2015 43

  44. ������ ��� ! vendor/assets ��� !Gemfile @"RubyConf"Taiwan,"2015 44

  45. ������ @"RubyConf"Taiwan,"2015 45

  46. �������� • ����� "JST" �� • ��� "sprockets"manifest"system" �� • ������������ • �������� "Ruby" ���� "JS" ��� @"RubyConf"Taiwan,"2015 46

  47. ����� @"RubyConf"Taiwan,"2015 47

  48. ������������� Bower,'Gulp,'npm,'Grunt,'... @"RubyConf"Taiwan,"2015 48

  49. ��� !Rails ����� @"RubyConf"Taiwan,"2015 49

  50. QQ @"RubyConf"Taiwan,"2015 50

  51. Rails&+&Bower @"RubyConf"Taiwan,"2015 51

  52. ����� rails&assets.org @"RubyConf"Taiwan,"2015 52

  53. ���� �� !Gem! ��� @"RubyConf"Taiwan,"2015 53

  54. .bowerrc { "directory": "vendor/assets/components" } � { "directory": "public/components" } @"RubyConf"Taiwan,"2015 54

  55. assets.rb Rails.application.config.assets.paths.concnat [ 'vendor/assets/components' ] @"RubyConf"Taiwan,"2015 55

  56. applica&on.scss @import 'material-design-lite/src/material-design-lite' applica&on.js //= require jquery //= require jquery_ujs //= require turbolinks //= require material-design-lite/material @"RubyConf"Taiwan,"2015 56

  57. ���� @"RubyConf"Taiwan,"2015 57

  58. ��������� • ���� "CSS" �� "assets" �� • �������������� • Autoprefixer • BrowserSync • JSHint • etc @"RubyConf"Taiwan,"2015 58

  59. ���� !assets! �� � !bootstrap! ��� @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); } @"RubyConf"Taiwan,"2015 59

  60. bower&install&bootstrap.sass ����������� !sprockets! ������� @import 'bootstrap-sass/.../bootstrap-sprockets'; @import 'bootstrap-sass/.../bootstrap'; ����� !bower!package! ���� !sass! ���� @"RubyConf"Taiwan,"2015 60

  61. ������������ � Autoprefixer � BrowserSync � JSHint � etc � @"RubyConf"Taiwan,"2015 61

  62. ��� !Rails ������ @"RubyConf"Taiwan,"2015 62

  63. ���� ���� @"RubyConf"Taiwan,"2015 63

  64. Rails&+&Bower&+&gulp @"RubyConf"Taiwan,"2015 64

  65. ������� @"RubyConf"Taiwan,"2015 65

  66. @"RubyConf"Taiwan,"2015 66

  67. Dan$ ����� @"RubyConf"Taiwan,"2015 67

  68. ������ 1. ���������� 2. ������ $ gulp_asset_path $ � $helper 3. public$ ������������ @"RubyConf"Taiwan,"2015 68

  69. @"RubyConf"Taiwan,"2015 69

  70. katryo' ���� • gulp&ugify • gulp&css&minify • gulp&concat • gulp&rev • gulp&rev&rails&manifest @"RubyConf"Taiwan,"2015 70

  71. ������ 1. ����� #sprockets ��� #gem# ��� #assets 2. ��� # asset_path # �������� #etag#string 3. �� # browserfy ������������ @"RubyConf"Taiwan,"2015 71

  72. ��������� @"RubyConf"Taiwan,"2015 72

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend


More recommend