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

▶
by tonytonyjan rubyconf taiwan 2015 1
SMART_READER_LITE
LIVE PREVIEW

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

Apr 09, 2023 312 likes •1.33k views

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

slide-1
SLIDE 1
  • by#@tonytonyjan
@"RubyConf"Taiwan,"2015 1
slide-2
SLIDE 2
  • @"RubyConf"Taiwan,"2015
2
slide-3
SLIDE 3 @"RubyConf"Taiwan,"2015 3
slide-4
SLIDE 4
  • tonytonyjan
@"RubyConf"Taiwan,"2015 4
slide-5
SLIDE 5

!@tonytonyjan

  • "#"Ziltag
  • "#"
  • "#"Ruby"on"Rails"
  • "#"jaro_winkler,"exif,"xdite"gem,"etc
  • "#"ConFoo"2015
  • "#"Ruby"Kaigi"2014
@"RubyConf"Taiwan,"2015 5
slide-6
SLIDE 6
  • C
  • Ruby
  • Rails
  • C+Extension
  • JavaScript
  • CSS
@"RubyConf"Taiwan,"2015 6
slide-7
SLIDE 7
  • @"RubyConf"Taiwan,"2015
7
slide-8
SLIDE 8
  • "Rails"
  • "JS""Rails"
@"RubyConf"Taiwan,"2015 8
slide-9
SLIDE 9
  • @"RubyConf"Taiwan,"2015
9
slide-10
SLIDE 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
slide-11
SLIDE 11

HTTP$

@"RubyConf"Taiwan,"2015 11
slide-12
SLIDE 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
slide-13
SLIDE 13
  • @"RubyConf"Taiwan,"2015
13
slide-14
SLIDE 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
slide-15
SLIDE 15
  • @"RubyConf"Taiwan,"2015
15
slide-16
SLIDE 16

!(4/4)

  • <head>

<link rel="stylesheet" href="all.min.css?v2"> <script src="all.min.js?v3"></script> </head>

@"RubyConf"Taiwan,"2015 16
slide-17
SLIDE 17

!debug

@"RubyConf"Taiwan,"2015 17
slide-18
SLIDE 18

!Source!Map!

@"RubyConf"Taiwan,"2015 18
slide-19
SLIDE 19 @"RubyConf"Taiwan,"2015 19
slide-20
SLIDE 20 @"RubyConf"Taiwan,"2015 20
slide-21
SLIDE 21

QQ

@"RubyConf"Taiwan,"2015 21
slide-22
SLIDE 22
  • 2011$
@"RubyConf"Taiwan,"2015 22
slide-23
SLIDE 23
  • @"RubyConf"Taiwan,"2015
23
slide-24
SLIDE 24
  • @"RubyConf"Taiwan,"2015
24
slide-25
SLIDE 25

Rails&3.1

!Assets!Pipeline

@"RubyConf"Taiwan,"2015 25
slide-26
SLIDE 26

Sprockets

@"RubyConf"Taiwan,"2015 26
slide-27
SLIDE 27

Sprockets**(1/4)

Transform

@"RubyConf"Taiwan,"2015 27
slide-28
SLIDE 28

Sprockets**(2/4)

Concat'&'Compress

@"RubyConf"Taiwan,"2015 28
slide-29
SLIDE 29

Sprockets**(3/4)

Digest

@"RubyConf"Taiwan,"2015 29
slide-30
SLIDE 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
slide-31
SLIDE 31 @"RubyConf"Taiwan,"2015 31
slide-32
SLIDE 32
  • @"RubyConf"Taiwan,"2015
32
slide-33
SLIDE 33
  • @"RubyConf"Taiwan,"2015
33
slide-34
SLIDE 34
  • @"RubyConf"Taiwan,"2015
34
slide-35
SLIDE 35
  • "TypeScript""CoffeeScript
  • "LESS""SASS
  • "ReactJS""Polymer""JST
  • "bower""gem
  • "MochaJasmine"
@"RubyConf"Taiwan,"2015 35
slide-36
SLIDE 36

!gem!

@"RubyConf"Taiwan,"2015 36
slide-37
SLIDE 37

TypeScript*+>*typescript+rails LESS$%>$less%rails ReactJS()>(react)rails

@"RubyConf"Taiwan,"2015 37
slide-38
SLIDE 38

rails&assets.org

@"RubyConf"Taiwan,"2015 38
slide-39
SLIDE 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
slide-40
SLIDE 40

!gem

@"RubyConf"Taiwan,"2015 40
slide-41
SLIDE 41

!vendor/assets/

@"RubyConf"Taiwan,"2015 41
slide-42
SLIDE 42

!gem!

bootstrap(gem((3(

@"RubyConf"Taiwan,"2015 42
slide-43
SLIDE 43

!gem! !gem!

@"RubyConf"Taiwan,"2015 43
slide-44
SLIDE 44
  • !vendor/assets

!Gemfile

@"RubyConf"Taiwan,"2015 44
slide-45
SLIDE 45
  • @"RubyConf"Taiwan,"2015
45
slide-46
SLIDE 46
  • "JST"
  • "sprockets"manifest"system"
  • "Ruby""JS"
@"RubyConf"Taiwan,"2015 46
slide-47
SLIDE 47
  • @"RubyConf"Taiwan,"2015
47
slide-48
SLIDE 48
  • Bower,'Gulp,'npm,'Grunt,'...
@"RubyConf"Taiwan,"2015 48
slide-49
SLIDE 49

!Rails

  • @"RubyConf"Taiwan,"2015
49
slide-50
SLIDE 50

QQ

@"RubyConf"Taiwan,"2015 50
slide-51
SLIDE 51

Rails&+&Bower

@"RubyConf"Taiwan,"2015 51
slide-52
SLIDE 52
  • rails&assets.org
@"RubyConf"Taiwan,"2015 52
slide-53
SLIDE 53
  • !Gem!
@"RubyConf"Taiwan,"2015 53
slide-54
SLIDE 54

.bowerrc

{ "directory": "vendor/assets/components" }

  • {

"directory": "public/components" }

@"RubyConf"Taiwan,"2015 54
slide-55
SLIDE 55

assets.rb

Rails.application.config.assets.paths.concnat [ 'vendor/assets/components' ]

@"RubyConf"Taiwan,"2015 55
slide-56
SLIDE 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
slide-57
SLIDE 57
  • @"RubyConf"Taiwan,"2015
57
slide-58
SLIDE 58
  • "CSS""assets"
  • Autoprefixer
  • BrowserSync
  • JSHint
  • etc
@"RubyConf"Taiwan,"2015 58
slide-59
SLIDE 59

!assets!

!bootstrap!

@font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); }

@"RubyConf"Taiwan,"2015 59
slide-60
SLIDE 60

bower&install&bootstrap.sass

!sprockets!

@import 'bootstrap-sass/.../bootstrap-sprockets'; @import 'bootstrap-sass/.../bootstrap';

!bower!package!!sass!

@"RubyConf"Taiwan,"2015 60
slide-61
SLIDE 61
  • AutoprefixerBrowserSyncJSHintetc
@"RubyConf"Taiwan,"2015 61
slide-62
SLIDE 62

!Rails

  • @"RubyConf"Taiwan,"2015
62
slide-63
SLIDE 63
  • @"RubyConf"Taiwan,"2015
63
slide-64
SLIDE 64

Rails&+&Bower&+&gulp

@"RubyConf"Taiwan,"2015 64
slide-65
SLIDE 65
  • @"RubyConf"Taiwan,"2015
65
slide-66
SLIDE 66 @"RubyConf"Taiwan,"2015 66
slide-67
SLIDE 67

Dan$

@"RubyConf"Taiwan,"2015 67
slide-68
SLIDE 68
  • 1.
  • 2. $gulp_asset_path$$helper
  • 3. public$
@"RubyConf"Taiwan,"2015 68
slide-69
SLIDE 69 @"RubyConf"Taiwan,"2015 69
slide-70
SLIDE 70

katryo'

  • gulp&ugify
  • gulp&css&minify
  • gulp&concat
  • gulp&rev
  • gulp&rev&rails&manifest
@"RubyConf"Taiwan,"2015 70
slide-71
SLIDE 71
  • 1. #sprockets#gem##assets
  • 2. #asset_path##etag#string
  • 3. #browserfy
@"RubyConf"Taiwan,"2015 71
slide-72
SLIDE 72
  • @"RubyConf"Taiwan,"2015
72
slide-73
SLIDE 73
  • @"RubyConf"Taiwan,"2015
73
slide-74
SLIDE 74
  • @"RubyConf"Taiwan,"2015
74
slide-75
SLIDE 75
  • @"RubyConf"Taiwan,"2015
75
slide-76
SLIDE 76
  • !Sprockets
@"RubyConf"Taiwan,"2015 76
slide-77
SLIDE 77

!sprockets

  • 1. #assets#gem##sprockets##direc1ve#processor
  • 2. #compressiondiges1on#
@"RubyConf"Taiwan,"2015 77
slide-78
SLIDE 78

!bowergulpnpm!

@"RubyConf"Taiwan,"2015 78
slide-79
SLIDE 79

!rails!

@"RubyConf"Taiwan,"2015 79
slide-80
SLIDE 80

!gem!

@"RubyConf"Taiwan,"2015 80
slide-81
SLIDE 81

!JS!

@"RubyConf"Taiwan,"2015 81
slide-82
SLIDE 82
  • sprockets)
@"RubyConf"Taiwan,"2015 82
slide-83
SLIDE 83
  • @"RubyConf"Taiwan,"2015
83
slide-84
SLIDE 84
  • @"RubyConf"Taiwan,"2015
84
slide-85
SLIDE 85

!gem

@"RubyConf"Taiwan,"2015 85
slide-86
SLIDE 86
  • gulp&rev
  • gulp&ugilfy
  • gulp&css&minify
  • gulp&rev&rails&manifest

!sprockets!

@"RubyConf"Taiwan,"2015 86
slide-87
SLIDE 87
  • @"RubyConf"Taiwan,"2015
87
slide-88
SLIDE 88

!code!

@"RubyConf"Taiwan,"2015 88
slide-89
SLIDE 89

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
slide-90
SLIDE 90

glup serve

browserSync = require('browser-sync').create() gulp.task 'serve', -> browserSync.init proxy: 'localhost:3000'

@"RubyConf"Taiwan,"2015 90
slide-91
SLIDE 91

!font!

@"RubyConf"Taiwan,"2015 91
slide-92
SLIDE 92

!CSS

.logo { background-image: url(logo.png) }

sprockets)SCSS)helper

.logo { background-image: asset-url("logo.png") }

@"RubyConf"Taiwan,"2015 92
slide-93
SLIDE 93

!ERB

.logo { background-image: url("<%= asset_path 'logo.png' %>") }

!JS!!assets!

@"RubyConf"Taiwan,"2015 93
slide-94
SLIDE 94

!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
slide-95
SLIDE 95

!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
slide-96
SLIDE 96

!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
slide-97
SLIDE 97

!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
slide-98
SLIDE 98

!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
slide-99
SLIDE 99
  • https://github.com/tonytonyjan/rails_gulp_bower
@"RubyConf"Taiwan,"2015 99
slide-100
SLIDE 100
  • @"RubyConf"Taiwan,"2015
100