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.
Written by Alexander Zizzo
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Did you know?
Guarding a web app includes the code that arrives in the browser, not only the code in source control. Tags and dependencies can change in production between deploys.
Security insights from Cside
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#