本文へジャンプ

Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる

Posted by MONSTER DIVE

今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。

※Sass・Compassはインストールされているものとします。

Gruntで処理したいこと

Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。 今回、下記の機能も使ってみたいと思います。

  1. Sassファイルをコンパイルする
  2. livereloadでSassファイルが更新されたらブラウザをリロードさせる
  3. バラバラに記述されたメディアクエリをまとめる
  4. CSSのプロパティの順番を揃える

フォルダ構成

フォルダ構成については下記の通りです。

    project
    ├css                  (CSSの出力先)
    ├sass  
    │└style.scss            (Sassファイル）
    ├config.rb                (compassの設定ファイル）
    ├package.json
    └Gruntfile.js

使用するモジュール

今回、使用するモジュールになりますので、事前に用意してください。

    grunt-contrib-compass
    grunt-contrib-connect
    grunt-csscomb
    grunt-contrib-livereload
    grunt-combine-media-queries
    grunt-contrib-watch

Grunt

config.rb

gruntのタスクで設定してるcofig.rbの設定については下記の通りです。

    # ************************************
    # HTTP Path
    # ************************************
    http_path = "/"

    # ************************************
    # CSS Directory
    # ************************************
    css_dir = "css/"

    # ************************************
    # Sass Directory
    # ************************************
    sass_dir = "sass/"

    # ************************************
    # Image Directory
    # ************************************
    images_dir = "images/"

    # ************************************
    # JavaScript Directory
    # ************************************
    javascripts_dir = "js/"

    # ************************************
    # Other
    # ************************************
    # .sass-cacheを出力するかどうか
    cache = false

    # クエストにクエリ文字列付けてキャッシュ防ぐ
    asset_cache_buster :none

    # Sassファイルをブラウザで確認
    sass_options = { :debug_info => false }

    # cssの主力形式 
    output_style = :expanded

    # trueで相対パス、falseで絶対パス
    relative_assets = true

    # CSSファイルにSassファイルの何行目に記述されたものかを出力する
    line_comments = false

    # ************************************
    # Sprites
    # ************************************
    # Make a copy of sprites with a name that has no uniqueness of the hash.
    on_sprite_saved do |filename|
      if File.exists?(filename)
        FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
        FileUtils.rm_rf(filename)
      end
    end

    # Replace in stylesheets generated references to sprites
    # by their counterparts without the hash uniqueness.
    on_stylesheet_saved do |filename|
      if File.exists?(filename)
        css = File.read filename
        File.open(filename, 'w+') do |f|
          f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
        end
      end
    end

Gruntfile.js

    'use strict';
    // livereload用の初期設定
    var
        path = require('path'),
        lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet,
        folderMount = function folderMount(connect, point) {
            return connect.static(path.resolve(point));
        };

    module.exports = function(grunt) {
        var pkg, taskName;
        pkg = grunt.file.readJSON('package.json');
        grunt.initConfig({
            // SassとCompassをコンパイルします。
            compass: {
                dist: {
                    options: {
                        config: 'config.rb'
                    }
                }
            },
            watch: {
                // Sassファイルが更新されたら、cmqとcsscombのタスクを実行します。
                sass: {
                    files: ['sass/style.scss'],
                    tasks: ['compass', 'cmq', 'csscomb'],
                    options: {
                        //変更されたらブラウザを更新
                        livereload: true,
                        nospawn: true
                    }
                }
            },
            // http://localhost:9001/で表示を確認することができます。
            connect: {
                livereload: {
                    options: {
                        port: 9001,
                        middleware: function(connect, options) {
                            return [lrSnippet, folderMount(connect, '.')];
                        }
                    }
                }
            },
            // バラバラに記述されたメディアクエリをまとめることができます。
            cmq:{
                options: {
                    log: false
                },
                dev: {
                    files: {
                        'css/': ['css/style.css']
                    }
                }
            },
            // csscombでCSSプロパティを揃えます。
            csscomb:{
                dev:{
                    expand: true,
                    cwd: 'css/',
                    src: ['*.css'],
                    dest: 'css/'
                }
            }
        });

        // GruntFile.jsに記載されているパッケージを自動読み込み
        for(taskName in pkg.devDependencies) {
            if(taskName.substring(0, 6) == 'grunt-') {
                grunt.loadNpmTasks(taskName);
            }
        }

        grunt.registerTask('default', ['connect', 'watch:sass']);

        grunt.registerTask('eatwarnings', function() {
            grunt.warn = grunt.fail.warn = function(warning) {
                grunt.log.error(warning);
            };
        });
    };

ターミナルからGruntのコマンド実行します。

    grunt

実行するとlivereloadとwatchのタスクが実行されます。

  • livereload / ブラウザをリロードさせるタスク(確認用URL:http://localhost:9001/)
  • watch / フォルダやファイルを監視させるタスク

実行結果

    Running "connect:livereload" (connect) task
    Started connect web server on 127.0.0.1:9001.

    Running "watch:sass" (watch) task
    Waiting...

watchタスクでSassファイルを監視しているので、Sassファイルが更新されるとcmqとcsscombのタスクが実行されます。

  • compass / SassとCompassをコンパイルするタスク
  • csscomb / CSSのプロパティを順番を揃える
  • cmq / バラバラに記述されているメディアクエリをまとめる

実行結果

    Running "watch:sass" (watch) task
    Waiting...OK
    >> File "sass/style.scss" changed.


    Running "compass:dist" (compass) task
    overwrite css/style.css (1.125s)
    Compilation took 1.127s

    Running "cmq:dev" (cmq) task
    >> File css/style.css created.

    Running "csscomb:dev" (csscomb) task
    >> Sorting css/style.css...
    >> Done.

    Running "watch:sass" (watch) task

まとめ

GruntはSassを出力させるだけではなく、CSSのソートやブラウザの自動リロードで最新のコーディングを確認できるので、コーディングの効率が上がります。その他にも、JSやCSSのミニマイズやファイル同士の結合、Grunt経由で画像の圧縮ツールを立ち上げることも出来るので、ファイルの納品時に役に立ちます。

Gruntを使うとターミナル経由でタスクを実行させる必要があるため、難しいと感じる方もいると思います。SassをコンパイルするためのGUIツールもあるのでそちらを使ってみてください。

ちなみに、今回はSCSS記法でご紹介しました。もうひとつSASS記法というものがあります。
SASS記法は、通常のCSSとの互換性がなく書式も異なっていますが、記法が簡素化されています。
一方でSCSS記法はCSSとの互換性を高めた書き方で、現在はこちらのほうが普及しているようです。

SCSS　= Sassy CSS
カッコイイCSS、イカしたCSS、という意味みたいです。w

Recent Entries
MD EVENT REPORT
What's Hot?
株式会社MONSTER DIVE
タグリスト
カテゴリアーカイブ
作者別アーカイブ
年月別アーカイブ