Jobbe med CSS, HTML og JS, i Rails uten å reloade websiden

Her kommer en spoiler for Ruby Meetupen i morgen, torsdag 17.okt kl 18 på fornebu (reis tidlig, det tar tid) : Link til meetupen

Visste du allerede dette, og ler av meg for at jeg er treg, skam deg for å ikke ha lykkes å dele kunnskapen! grr

Dette scenarioet bør de fleste gjennkjenne seg i :

Du ønsker og endre noen styles, f.eks en farge på en link. Du går til en css.scss fil, endrer/legger til, går til browseren og refresher. Du venter på at Rails skal kompilerer alle css.scss, alle html.erb/haml/slim, alle js.coffee, og ser linken din med fargen. Æsj, dårlig farge, prøver en ny, eller kjører inspect element i browseren og hacker deg frem der.

Kjenner du deg igjen? Live Reload to the rescue.

group :development do
# livereload for faster development with scss
gem 'guard-livereload', require: false
gem "rack-livereload"
end

i development.rb
config.middleware.use Rack::LiveReload

i terminalen
$ guard -c

og aller første gang må du installere
$ guard init livereload

Med dette. gå til xx.css.scss, endre fargen på feltet, save fila (så guard plukker opp at det er filendring) og se fargen endret øyeblikkelig. livereload lytter også på .html. og .js.

Litt mer i dybden. rack-livereload injecter livereload.js inn i dine html. Via websockets pusher guard-livereload til noe livereload lytter på, som tar imot den endrede filen. Kult?

Værssågod. Håper du gleder deg til å få dette gjentatt på meetup i morgen, torsdag 17.okt 2013 kl 18 på fornebu.

Vist 425 ganger. Følges av 3 personer.

Kommentarer

Takk for dette. Et annet nyttig lite dev env trick som jeg har satt veldig pris på er å sørge for at terminalen oppfører seg så likt som en standard teksteditor som mulig. Det gjør at jeg kan bruke følgende hotkeys i terminalen:
⌥←: Go left one word (Send Escape Sequence | b)
⌥→: Go right one word (Send Escape Sequence | f)
⌘←: Go to start of line (Send Hex Code | 0×01)
⌘→: Go to end of line (Send Hex Code | 0×05)

Se link: http://hiltmon.com/blog/2013/02/13/make-iterm-2-more-mac-like/

Kult! Jeg måtte også legge til dette i development.rb for å få livereload til å virke:
config.middleware.use Rack::LiveReload

takk Pål, la det inn nå.

Nye bilder