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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#