�������� by#@tonytonyjan @"RubyConf"Taiwan,"2015 1
������� @"RubyConf"Taiwan,"2015 2
@"RubyConf"Taiwan,"2015 3
�� ��� tonytonyjan @"RubyConf"Taiwan,"2015 4
�� !@tonytonyjan • ��� "#"Ziltag • ��� "#" ����� • �� "#"Ruby"on"Rails" ���� • �� "#"jaro_winkler,"exif,"xdite"gem,"etc • �� "#"ConFoo"2015 • �� "#"Ruby"Kaigi"2014 @"RubyConf"Taiwan,"2015 5
�� • C • Ruby • Rails • C+Extension • JavaScript • CSS @"RubyConf"Taiwan,"2015 6
�� @"RubyConf"Taiwan,"2015 7
���� �������� • ���� • � "Rails" �������� • �� "JS" ����� "Rails" ��� @"RubyConf"Taiwan,"2015 8
�������� @"RubyConf"Taiwan,"2015 9
������� !(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
HTTP$ ���� @"RubyConf"Taiwan,"2015 11
������� !(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
���� @"RubyConf"Taiwan,"2015 13
������� !(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
����� @"RubyConf"Taiwan,"2015 15
������� !(4/4) �������� <head> <link rel="stylesheet" href="all.min.css?v2"> <script src="all.min.js?v3"></script> </head> @"RubyConf"Taiwan,"2015 16
�� !debug @"RubyConf"Taiwan,"2015 17
������ !Source!Map! ��� @"RubyConf"Taiwan,"2015 18
@"RubyConf"Taiwan,"2015 19
@"RubyConf"Taiwan,"2015 20
QQ @"RubyConf"Taiwan,"2015 21
������� � 2011$ ��� @"RubyConf"Taiwan,"2015 22
����������� @"RubyConf"Taiwan,"2015 23
���� @"RubyConf"Taiwan,"2015 24
Rails&3.1 ��� !Assets!Pipeline @"RubyConf"Taiwan,"2015 25
Sprockets @"RubyConf"Taiwan,"2015 26
Sprockets* ����� *(1/4) Transform @"RubyConf"Taiwan,"2015 27
Sprockets* ����� *(2/4) Concat'&'Compress @"RubyConf"Taiwan,"2015 28
Sprockets* ����� *(3/4) Digest @"RubyConf"Taiwan,"2015 29
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
@"RubyConf"Taiwan,"2015 31
����� @"RubyConf"Taiwan,"2015 32
������ @"RubyConf"Taiwan,"2015 33
���������� @"RubyConf"Taiwan,"2015 34
������ • �� "TypeScript" �� "CoffeeScript • �� "LESS" �� "SASS • �� "ReactJS" � "Polymer" �� "JST • ��� "bower" ������������ "gem • ���� "Mocha � Jasmine" ��� @"RubyConf"Taiwan,"2015 35
������� !gem! ����� @"RubyConf"Taiwan,"2015 36
TypeScript*+>*typescript+rails LESS$%>$less%rails ReactJS()>(react)rails @"RubyConf"Taiwan,"2015 37
rails&assets.org @"RubyConf"Taiwan,"2015 38
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
���� !gem � @"RubyConf"Taiwan,"2015 40
����� ! vendor/assets/ @"RubyConf"Taiwan,"2015 41
�� !gem! ��� bootstrap(gem( � (3( ��� @"RubyConf"Taiwan,"2015 42
�� !gem! �� �� !gem! �� @"RubyConf"Taiwan,"2015 43
������ ��� ! vendor/assets ��� !Gemfile @"RubyConf"Taiwan,"2015 44
������ @"RubyConf"Taiwan,"2015 45
�������� • ����� "JST" �� • ��� "sprockets"manifest"system" �� • ������������ • �������� "Ruby" ���� "JS" ��� @"RubyConf"Taiwan,"2015 46
����� @"RubyConf"Taiwan,"2015 47
������������� Bower,'Gulp,'npm,'Grunt,'... @"RubyConf"Taiwan,"2015 48
��� !Rails ����� @"RubyConf"Taiwan,"2015 49
QQ @"RubyConf"Taiwan,"2015 50
Rails&+&Bower @"RubyConf"Taiwan,"2015 51
����� rails&assets.org @"RubyConf"Taiwan,"2015 52
���� �� !Gem! ��� @"RubyConf"Taiwan,"2015 53
.bowerrc { "directory": "vendor/assets/components" } � { "directory": "public/components" } @"RubyConf"Taiwan,"2015 54
assets.rb Rails.application.config.assets.paths.concnat [ 'vendor/assets/components' ] @"RubyConf"Taiwan,"2015 55
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
���� @"RubyConf"Taiwan,"2015 57
��������� • ���� "CSS" �� "assets" �� • �������������� • Autoprefixer • BrowserSync • JSHint • etc @"RubyConf"Taiwan,"2015 58
���� !assets! �� � !bootstrap! ��� @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); } @"RubyConf"Taiwan,"2015 59
bower&install&bootstrap.sass ����������� !sprockets! ������� @import 'bootstrap-sass/.../bootstrap-sprockets'; @import 'bootstrap-sass/.../bootstrap'; ����� !bower!package! ���� !sass! ���� @"RubyConf"Taiwan,"2015 60
������������ � Autoprefixer � BrowserSync � JSHint � etc � @"RubyConf"Taiwan,"2015 61
��� !Rails ������ @"RubyConf"Taiwan,"2015 62
���� ���� @"RubyConf"Taiwan,"2015 63
Rails&+&Bower&+&gulp @"RubyConf"Taiwan,"2015 64
������� @"RubyConf"Taiwan,"2015 65
@"RubyConf"Taiwan,"2015 66
Dan$ ����� @"RubyConf"Taiwan,"2015 67
������ 1. ���������� 2. ������ $ gulp_asset_path $ � $helper 3. public$ ������������ @"RubyConf"Taiwan,"2015 68
@"RubyConf"Taiwan,"2015 69
katryo' ���� • gulp&ugify • gulp&css&minify • gulp&concat • gulp&rev • gulp&rev&rails&manifest @"RubyConf"Taiwan,"2015 70
������ 1. ����� #sprockets ��� #gem# ��� #assets 2. ��� # asset_path # �������� #etag#string 3. �� # browserfy ������������ @"RubyConf"Taiwan,"2015 71
��������� @"RubyConf"Taiwan,"2015 72
Recommend
More recommend