Live Reload no Ruby on Rails - Vídeos de Ti
ERB, HTML, CSS, JS & Ruby on Rails! ⚡
Para tal, vamos precisar das seguintes gems:
- guard-livereload
- rack-livereload
Você pode entrar no site do http://www.rubygems.org e baixar as versões mais recentes.
Vamos criar um projetinho de demonstração:
No Gemfile do projeto, dentro do bloco de desenvolvimento, vamos adicionar as gems que mencionei logo no inicio deste post.
gem 'guard', '~> 2.15'
Feito isso, rode o comando ​bundle install​
Ok. Agora vamos gerar um arquivo chamado "Guardfile" usando o comando guard init livereload.
Neste arquivo é que ficam as configurações do Guard, como arquivos que ele vai ler, porta em que o serviço vai rodar e etc…
Para configurar o rack-livereload abra o seu arquivo config/environments/development.rb e adicione a seguinte linha:
Por hora é tudo o que precisamos. Vamos criar um scaffold para posts.
$ rails g scaffold post title body:text user && rails db:migrate
Vamos iniciar o nosso guard. No terminal. Digite o seguinte: $ bundle exec guard ou simplesmente $ guaOk! Agora abra outro terminal e inicie o servidor da aplicação. ​$ rails s​
Feito isso abra seu editor de text preferido e faça alguns alterações, por exemplo, na index de posts… Se tudo tiver ocorrido bem você verá que o browse vai atualizar automaticamente toda vez que você salvar o arquivo. E no terminal, onde o guard esta rodando, você vai perceber que ele vai mostrar alguns logs referentes ao arquivo que você esta editando no momento.
-  20:08:08 - INFO - Reloading browser: app/views/posts/index.html.erb app/views/posts/index.html.erb
Este é o caminho feliz 🙂
Ok! Você fez tudo até aqui e esta funcionando? que maravilha!! Porém, eu tive um probleminha com as permissões da porta padrão que o guard roda. Em decorrência disso acabou não funcionando como deveria. Eu vou aproveitar pra mostrar como rodou aqui na minha maquina. Lembrando que essa também é uma solução recomendada pela pagina oficial da gem 🙂
Erro: `start_tcp_server': no acceptor (port is in use or requires root privileges) (RuntimeError).
Dentro do nosso Guardfile temos um bloco "com uma descrição 'livereload'" . É possível passar valores diferentes dos valores defaults. No meu caso vou mudar host e a porta vai rodar. O meu ficou assim:
guard 'livereload', port: '35729', host: '127.0.0.1' do
css: :css,
scss: :css,
sass: :css,
Instalei também uma e extensãozinha no meu google-chrome chamada livereload http://livereload.com.
Rodando novamente o guard no terminal:
Subindo o servidor da aplicação:
Agora no browse basta da um clique sobre o ícone do live reload e tudo deve funcionar perfeitamente! 🙂