Guard + Compass + Foundation で環境構築メモ
2013.07 05

フロントエンド開発でもCUIベースでのビルドツールが充実してきています。RubyベースのGuardで複数のリソースを扱う方法についてメモをまとめました。

    Guardはコマンドラインツールで、ファイル変更を監視してコンパイルや結合などのタスクを実行できます。Middlemanでプロトタイプを構築して、既存システム(PHPベース)に移植という段取りだったのですが、Middlemanのディレクトリ構成をそのまま持ち込むことはできません。

    Guardを採用した理由としては以下があります。CoffeeScript、concat、uglifyはまた今度に。

    • Compass、CoffeeScript、Slimといった様々なライブラリを複合で扱える
    • BundlerでGem管理ができる
    • Rubyベースなので資産を再利用しやすかった

    まず、CompassとFoundationを導入する段取りについて。

    Gemfile

    Guardプラグイン各種を入れておきます。

    # SASS & Compass
    source ‘http://rubygems.org’
    
    # V8 JavaScript Engine (for Uglifier)
    gem “therubyracer”
    gem "sass"
    gem "compass"
    gem "zurb-foundation"
    gem "susy"
    gem "compass-normalize"
    
    # For concatenation/compression
    gem "uglifier"
    
    # Guard and plugins
    gem "guard"
    gem "guard-sass"
    gem "guard-compass"
    gem "guard-coffeescript"
    gem "guard-livereload"
    gem "guard-concat"
    gem "guard-uglify"
    gem "rb-fsevent"
    

    Bundlerでインストールします。

    bundle install --path vendor/bundler

    config.rb

    各種Gemをrequireしておきます。

    require 'zurb-foundation'
    require 'susy'
    require 'compass-normalize'
    

    Sassファイルでは以下のようにインポートしておきます。

    @import "normalize";
    @import "foundation";
    

    Foundationについては、これですべてのスタイルが読み込まれます。

    Guardfile

    CompassでSassファイルをコンパイルするタスクを用意します。
    正規表現で .scss と .sass 両方をコンパイル対象にしています。

    guard :compass do
        watch(%r{sass/(.+\.s[ac]ss)})
    end
    

    Guard実行

    bundle exec guard init
    bundle exec guard
    

    コマンドを実行するとタスクが実行され、さらにファイル変更の監視を始めます。

    [1] guard(main)>

    この記事へのコメント

    この記事にコメントを投稿する

    作者について

    青森県内でソフトウェア・システム開発を行うフリーランスのプログラマー。元々は集中監視システム開発に従事。現在はウェブサイト製作・オンラインシステムの開発案件を中心に、プログラミングのスキルトレーニングや講演も行う。

    TEL 0172-55-7030  FAX 0172-55-7031
    10:00 - 18:00 土日祝休

    恐れ入りますが、お急ぎの場合を除いて、メールにてお問い合わせください。