Use guard para assistir seu projeto, compilar SASS e minificar arquivos CSS / JS automaticamente (mais o livereload).

Passos

1) Exclua Gemfile.lockem seu projeto, se existir

2) Atualize seu Guardfilee Gemfile(a configuração pressupõe WordPress – portanto, eles devem estar na raiz do tema) com o código correspondente abaixo

3) Executar bundle installno terminal enquanto estiver no diretório

4) Executar juicer install yui_compressor, juicer install closure_compiler,juicer install jslint

5) Executar guard -ino terminal

Gemfile


source "https://rubygems.org"

gem
'rake'
gem
'guard'
gem
'coffee-script'
gem
'rb-fsevent'
gem
'rb-inotify'
gem
'sass'
gem
'compass'
gem
'sass-globbing'
gem
'compass-validator'
gem
'oily_png'
gem
'css_parser'
gem
'uglifier'
gem
'guard-compass'
gem
'guard-concat'
gem
'guard-process'
gem
'guard-uglify', github: 'pferdefleisch/guard-uglify'
gem
'guard-livereload'
gem
'juicer'
gem
'therubyracer'
end

Guardfile


# Compile stylesheet (compass watch)
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

# Minify CSS
guard
'process', :name => 'Minify CSS', :command => 'juicer merge assets/css/style.css --force -c none' do
watch
%r{assets/css/style.css}
end

# Minify JS
guard
'process', :name => 'Minify application javascript', :command => 'juicer merge assets/js/app.js --force -s' do
watch
%r{assets/js/app.js}
end

# Livereload
guard
:livereload do
watch
(%r{.+.(css|js|html?)$})
end

Últimos Passos e Resultado

  • Altere os caminhos conforme necessário no Guardfile (a assets/js/*parte)
  • Agora, ao salvar seus arquivos principais .sass , .scss , .js , o compass irá compilar o arquivo CSS e o juicer irá minimizar os arquivos CSS / JS.