WEBデザイナーがRuby+Grunt+Compass+Sassでコーディング作業効率の良い環境を作ってみた

はじめに

• WEBデザイナーがhtml、cssコーディング作業をするときに少しでも無駄を減らしたい
• WEBデザイナーが感じる「環境をつくるということの心の壁」を乗り越えたい
• なんか新しいことやってみたい

すること

• ファイル更新時ブラウザ自動オープン
• ファイル更新時ブラウザ自動更新
• sassからcssへの自動コンパイル
• ローカルでHTTPサーバー起動

めちゃ便利。詳細説明は割愛。

Command Line Tools for Xcodeインストール

$ xcode-select --install

Nord.jsインストール

Nord.jsの確認

インストールできたかバージョンチェックで確認

$ node -v

Rubyの確認

念のためインストールされているかバージョンチェック

$ ruby -v

Sassインストール

$ gem install sass

Compassインストール

$ gem install compass

作業フォルダをつくる

こちらが今回の最終的な構造

project
    ├index.html
    ├stylesheet
    │  └style.css            
    ├sass
    │  └style.scss              
    ├node_modules
    │└grunt
    │└grunt-contrib-sass
    │└grunt-contrib-watch
    │└grunt-contrib-connect
    ├config.rb
    ├package.json
    └Gruntfile.js

以下をまず作っておく。ほかは自動で作られる。

project
    └index.html

以下からprojectディレクトリで作業する

Gruntインストール

$ npm install -g grunt

package.jsonをつくる

$ npm init

いろいろ聞かれるがEnter連打でOK

npmパッケージインストール

Compassタスク
$ npm install grunt grunt-contrib-compass --save-dev

監視タスク
$ npm install grunt grunt-contrib-watch --save-dev

HTTPサーバー起動タスク
$ npm install grunt grunt-contrib-connect --save-dev

みっつをまとめる場合
$ npm install grunt-contrib-compass grunt grunt-contrib-watch grunt grunt-contrib-connect --save-dev

Compass実行

$ compass create

エラー出たら

$ rbenv rehash

Gruntfile.jsの作成

Gruntfile.js

module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.registerTask("default", ["connect", "watch", "compass"]);
  grunt.initConfig({
    compass: {
      compile: {
        options: {
        }
      }
    },
    connect: {
      livereload: {
        options: {
          port: 9001
        }
      }
    },
    watch: {
      css: {
        files: ['stylesheets/style.css']
      },
      scss: {
        files: ['sass/style.scss'],
        tasks: ['compass']
      }
    }
  });
};

Grunt実行

$ grunt

確認

ターミナルで以下が表示されたらOK

Running "connect:livereload" (connect) task
Started connect web server on http://0.0.0.0:9001

Running "watch" task
Waiting...

こちらへアクセス
http://localhost:9001/

Done!!