🥇 Atualize automaticamente seu navegador ao atualizar um arquivo sass

Não seria bom se seus arquivos sass / scss compilassem automaticamente e todas as alterações aparecessem imediatamente em seu navegador? Uma maneira de conseguir isso é a seguinte:

Instale a extensão do navegador live-reload para o navegador de sua escolha

Adicione as seguintes joias (talvez você não precise de todas):

Gemfile

source "https://rubygems.org"
group :development do
  gem "compass"
  gem 'sass'
  gem 'sass-globbing'
  gem 'compass'
  gem 'compass-validator'
  gem 'oily_png'
  gem 'css_parser'
  gem 'guard'
  # https://github.com/guard/guard#efficient-filesystem-handling
  gem 'rb-fsevent', :require => false # Mac OSX
  gem 'guard-compass'
  gem 'guard-shell' 
  gem 'yajl-ruby'
  gem 'guard-livereload'
end

Supondo que você use a bússola para o seu projeto e, portanto, tenha config.rb na pasta raiz do seu projeto – adicione o seguinte arquivo de proteção
Guardfile
```
group :development do
  guard :livereload do
    watch(%r{.+.(css|js|html?)$})
  end

  if File.exists?("./config.rb")
    # Compile on start.
    puts `compass compile --time --quiet`
    # https://github.com/guard/guard-compass
    guard :compass do
      watch(%r{(.*).s[ac]ss$})
    end
  end
end
```
o guardfile acima é aquele que eu uso para projetos de sites estáticos. Uma variante que deve funcionar bem para projetos Rails pode ser encontrada aqui (link stackoverflow).
Instale as gemas e execute a proteção
```
bundle install
guard -i
```
Feito! Agora você pode abrir sua página da web no navegador, fazer algumas alterações em um arquivo sass, salvar e ver o navegador atualizar a página.

Related Posts