by tonytonyjan rubyconf taiwan 2015 1

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

Recommend


More recommend