Sass & CoffeeScript automated compiling and minifying with Guard

README.md

Sass & CoffeeScript automated compiling and minifying with Guard:

1. Install RVM http://beginrescueend.com/rvm/install/

2. Install Ruby 1.9.2: $ rvm install ruby-1.9.2-p290

3. Create a gemset for 'yourapplication': $ rvm gemset create yourapplication

4. Switch to this gemset $ rvm gemset use yourapplication

5. Install bundler : $ gem install bundler

6. $ bundle install (this should take a while…)

7. Install Juicer needed files:

   $ juicer install yui_compressor
   $ juicer install closure_compiler
   $ juicer install jslint

8. $ guard or $ bundle exec guard

Bonus: install LiveReload, for Chrome or for Safari

Default directories for your assets:

Sources:

• assets/sass/
• assets/coffeescripts

Compiled files

• javascripts/*.js
• stylesheets/*.css

Only application.css and application.js will be minified. You can change that in Guardfile.

compass.rb

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "assets/sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :nested

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Gemfile

source "http://rubygems.org"
group :development do
  gem 'rake'
  gem 'guard'
  gem 'coffee-script'
  gem 'rb-fsevent'
  gem 'rb-inotify'
  gem 'compass', '0.11.5'
  gem 'sass', '3.1.5'
  gem 'guard-compass'
  gem 'guard-process'
  gem 'guard-livereload'
  gem 'uglifier'
  gem 'juicer'
  gem 'guard-uglify'
  gem 'therubyracer' # v8 engine
end

Guardfile

# Compile stylesheets
guard 'compass', :configuration_file => "config/compass.rb" do
  watch(/^assets\/sass\/(.*)\.scss/)
end

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

guard 'process', :name => 'Combine Javascript from CoffeeScript', :command => 'coffee -cbj javascripts/application.js assets/coffeescripts/' do
  watch %r{assets/coffeescripts/.+\.coffee}
end

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

# Watch for modifications in application.css and application.js 
# and reload the browser if so
guard 'livereload', :apply_js_live => true, :apply_css_live => true do
  watch(%r{stylesheets/application\.css})
  watch(%r{javascripts/application\.js})
end

great tutorial found it very interesting have a great day
fluffywuffy aka timmy