Skip to content

Instantly share code, notes, and snippets.

@jbeduya
Forked from kaelig/Gemfile
Created July 12, 2012 14:38
Show Gist options
  • Save jbeduya/3098515 to your computer and use it in GitHub Desktop.
Save jbeduya/3098515 to your computer and use it in GitHub Desktop.
Sass & CoffeeScript automated compiling and minifying with Guard

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.

# 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
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
# 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment