本文へジャンプ

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

Posted by MD

今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、Junichi Hondaが紹介が紹介してくれてるのこちらをご覧ください。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

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

  • 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ファイルが更新されるとcmqcsscombのタスクが実行されます。

  • 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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr