Post on 01-Aug-2020
�������@"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
����@"RubyConf"Taiwan,"2015 73
��������
@"RubyConf"Taiwan,"2015 74
�������@"RubyConf"Taiwan,"2015 75
�������!Sprockets@"RubyConf"Taiwan,"2015 76
�����!sprockets
1.�#assets#gem#��#sprockets#�#direc1ve#processor
2.� �#compression�diges1on#�����
@"RubyConf"Taiwan,"2015 77
�����!bowergulpnpm!���
@"RubyConf"Taiwan,"2015 78
���!rails!�������
@"RubyConf"Taiwan,"2015 79
����!gem!����
@"RubyConf"Taiwan,"2015 80
����!JS!����
@"RubyConf"Taiwan,"2015 81
��������sprockets)�����
@"RubyConf"Taiwan,"2015 82
��������
@"RubyConf"Taiwan,"2015 83
��������
@"RubyConf"Taiwan,"2015 84
���!gem@"RubyConf"Taiwan,"2015 85
����• gulp&rev
• gulp&ugilfy
• gulp&css&minify
• gulp&rev&rails&manifest
��!sprockets!��@"RubyConf"Taiwan,"2015 86
����@"RubyConf"Taiwan,"2015 87
���!code!������
@"RubyConf"Taiwan,"2015 88
gulp application.js
gulp.task 'application.js', -> gulp.src [ 'app/assets/javascripts/application/manifest.js' 'bower_components/bootstrap/dist/js/bootstrap.js' 'bower_components/material-design-lite/material.js' 'app/assets/javascripts/application/**/*.{coffee,js}' ] .pipe $.if(/\.coffee$/, $.coffee()) # ��� pipe ��� ���� .pipe $.concat('application.js') .pipe gulp.dest 'app/assets/javascripts'
@"RubyConf"Taiwan,"2015 89
glup serve
browserSync = require('browser-sync').create()
gulp.task 'serve', -> browserSync.init proxy: 'localhost:3000'
@"RubyConf"Taiwan,"2015 90
��!font!��������
@"RubyConf"Taiwan,"2015 91
��!CSS
.logo { background-image: url(logo.png)}
sprockets)SCSS)helper
.logo { background-image: asset-url("logo.png")}
@"RubyConf"Taiwan,"2015 92
��!ERB
.logo { background-image: url("<%= asset_path 'logo.png' %>")}
����!JS!�����!assets!�� ���
@"RubyConf"Taiwan,"2015 93
��!assets!��config/ini(alizers/assets.rb
Rails.application.config.assets.paths << 'vendor/assets/components'Rails.application.config.assets.paths.concat Dir['vendor/assets/components/**/*/fonts']Rails.application.config.assets.precompile += %w[*.eot *.woff2 *.woff *.ttf *.svg]
@"RubyConf"Taiwan,"2015 94
��!assets!��Rails.applica)on.assets.paths
/.../hello/app/assets/images/.../hello/app/assets/javascripts/.../hello/app/assets/stylesheets/.../hello/vendor/assets/components/.../hello/vendor/assets/javascripts/.../hello/vendor/assets/stylesheets/.../gems/turbolinks-2.5.3/lib/assets/javascripts/.../gems/jquery-rails-4.0.4/vendor/assets/javascripts/.../gems/coffee-rails-4.1.0/lib/assets/javascripts/.../hello/vendor/assets/components/.../hello/vendor/assets/components/bootstrap-sass/assets/fonts */.../hello/vendor/assets/components/font-awesome-sass/assets/fonts *
@"RubyConf"Taiwan,"2015 95
��!assets!������
url(path/to/fonts/foo.svg) -> url("<%= asset_path 'foo.svg' %>")url(../fonts/bar.eot) -> url("<%= asset_path 'bar.eot' %>")url(fonts/buz.woff2) -> url("<%= asset_path 'buz.woff2' %>")
@"RubyConf"Taiwan,"2015 96
��!assets!����!bootstrap)sass!����!Mincer
@function twbs-font-path($path) { // do something like following // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>" // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>" // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>" @return "<%- asset_path('#{$path}'.replace(/[#?].*$/, '')) + '#{$path}'.replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>";}
@"RubyConf"Taiwan,"2015 97
��!assets!��gulp%replace
$ = require('gulp-load-plugins')()gulp.task 'application.css', -> gulp.src [ 'app/assets/stylesheets/application.scss' 'app/assets/stylesheets/application/**/*.{css,scss,sass}' ] .pipe $.concat 'application' .pipe $.sass includePaths: ['vendor/assets/components'] .pipe $.replace /url\((['"]?)[^\1)]*fonts\/([^\1)]+)\1\)/g, "url('<%= asset_path '$2' %>')" .pipe $.rename 'application.css.erb' .pipe gulp.dest 'app/assets/stylesheets'
@"RubyConf"Taiwan,"2015 98
����https://github.com/tonytonyjan/rails_gulp_bower
@"RubyConf"Taiwan,"2015 99
����@"RubyConf"Taiwan,"2015 100