読者です 読者をやめる 読者になる 読者になる

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか

gulp-sassとgulp-ruby-sassの違いをざっくりと調べた

regular gulp sass

Gulpを使用してSassのコンパイルをするときに使用するgulp-sassとgulp-ruby-sass。
どちらも用途は同じなのですが、微妙に違いがあり、どちらを使用すると良いのかいつも迷うためざっくりまとめました。

それぞれのバージョン

  • gulp-sass: 1.3.3
  • gulp-ruby-sass: 1.0.1

コンパイル方法

gulp-sass

C/C++で書かれたLibsassをwrapしているnode-sassを使用。
Sassのgemをインストールしなくてもgulp-sassのみで使用可能。

gulp-ruby-sass

Sassのgemを使用。
gulp-ruby-sassを使用するときは、あらかじめgemのインストールが必要。

処理速度

処理速度はgulp-sassのほうが速いらしい
gulp-ruby-sassは一度gemに処理を投げているからなのかな…?

出力形式

出力形式はgulp-ruby-sassのほうが豊富(nested/compressed/compact/expanded)。
gulp-sassはLibsassが'nested’, ‘compressed'の2つしかサポートしていないため。

書き方

gulp-sass

gulp-sassでコンパイルするときは、ソースの指定で /*.scss のような指定方法が可能。
また、ソースの指定には gulp.src('指定ファイル’).pipe() を使用しなければならない。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  return gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('css/'))
});

gulp-ruby-sass

gulp-ruby-sassでコンパイルするときは、gulp-sassの様なソースの指定は出来ない。
そのためファイルを指定するか、ディレクトリを指定しなければならない。
ソースの指定には gulp.src().pipe() は使用せず、sass('指定ファイル’, {オプション}) のように直接関数に引数を渡す形で使用する。

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');

gulp.task('sass', function() {
  return sass('sass/')
    .pipe(gulp.dest('css/'));
});

まとめ

ざっくり調べたところ、

  • 処理速度を求めるならgulp-sass
  • 出力形式を選びたいならgulp-ruby-sass

といったところでしょうか。
出力形式にこだわったところで最後にminifyするのであればgulp-sassでいいような気もします。

あとは、gulp-plumnberを使用したいのであればgulp-sassを使うと良いです。
なぜならgulp-ruby-sassはgulp-plumnberには対応していないので…。

本当に自分の必要な範囲しか調べていないので気づいていないメリット/デメリットがあるかもしれません。
補足あれば教えていただきたいです

【2015/04/14追記】
まとり(@ub_pnr)さんSass Compatibilityというサイトを教えていただきました。ありがとうございます!
Ruby Sass、libsassのサポート状況が一覧できてとても便利です。
必要な機能を見比べてgulp-sassかgulp-ruby-sassのどちらを使うかを考えると良いかと思います。