Railsで使える便利な機能をRails以外で使いたい場合にGuardを使う

目的

//= require foo.js

でjavascriptファイルをくっつけて、minifyしたい..

class Person
  name: 'foo'

Coffeeも書きたい...

sass + compassを使いたい

@import "compass/css3";
@import "compass/reset";

.foo {
  @include border-radius(4px, 4px);
}

これらを使いたい...

しかし、使用しているフレームワークだとあまり対応していなかったり...

というときに、guardでとりあえず適当に使えるようにした。

STEP 0

Rubyをインストール

STEP 1

プロジェクト直下にGemfileを追加

source 'https://rubygems.org'

group :development do
  gem 'compass'
  gem 'uglifier'
  gem 'guard-sass', require: false
  gem 'guard-sprockets'
  gem 'guard-coffeescript'
  gem 'rb-inotify', require: false
  gem 'rb-fsevent', require: false
  gem 'rb-fchange', require: false
  gem 'growl', require: false
  gem 'terminal-notifier-guard', require: false
  gem 'rb-notifu', require: false
end

bundle install !!!

bundle install

STEP 2

Guardfileを書く

bundle exec guard init

e.g.)

guard 'coffeescript', input: 'assets/coffee', output: 'public/javascripts'
guard 'sass', input: 'assets/sass', compass: true, output: 'public/css', compress: true, style: :compressed
guard 'sprockets', destination: 'public/javascripts', asset_paths: ['assets/javascripts'], minify: true do
  watch(%r{^assets/javascripts/([^/]*)\.js$})
end

• assets/coffee以下の.coffeeが変更されたら、public/javascripts以下に設置
• assets/sass以下の.scss or .sassが変更されたら、public/css以下に設置
• aasets/javascripts以下の.jsが変更されたら、public/javascripts以下に設置

監視するフォルダ、出力するフォルダをプロジェクト構成に合わせて、適切に設定してあげる。

STEP 3

bundle exec guard !!!

bundle exec guard

これでGaurdfileの設定に応じて、色々やってくれる。