Last Updated: February 25, 2016
·
2.56K
· elzii

Use guard to watch your project, compile SASS, and minify CSS/JS files automatically (plus livereload).

Steps

1) Delete Gemfile.lock in your project if it exists

2) Update your Guardfile andGemfile (setup assumes WordPress - so these should be at root of theme) with corresponding code below

3) Run bundle install in terminal while in the directory

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

5) Run guard -i in 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

Last Steps & Result

  • Change the paths as necessary in the Guardfile (the assets/js/* part)
  • Now upon saving your main .sass, .scss, .js files, compass will compile the CSS file and juicer will minify the CSS/JS files.