[SCSS][Gulp]これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

この記事はGulp.js（全俺） Advent Calendar 2014です。

前回のこれからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除でタスクの同期とディレクトリ・ファイルの削除について勉強しました。今回はgulp-sassからgulp-ruby-sassに乗り換えてみます。

gulp-sassとgulp-ruby-sassの違い

gulp-sassはnode-sassのwrapperでruby版のSassがなくても動作しコンパイルも早いようです。ただし、.sassだとコンパイルに問題もあるとか。gulp-ruby-sassはRuby版のSassを使うのでコンパイルがやや遅いという点はありますが安心して利用できます。言うまでのことでもありませんがこれからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみるで紹介した通りRuby環境とGemのインストールが必要です。

gulp-sassで.sassファイルを使うときの注意点

Sassプラグインの入れ替え

インストール済みのgulp-sassをアンインストールしてgulp-ruby-sassをインストールします。

gulp-sassのアンインストール

$ sudo npm uninstall gulp-sass --save-dev
Password:
unbuild gulp-sass@1.2.3

gulp-ruby-sassのインストール

$ sudo npm install gulp-ruby-sass --save-dev
gulp-ruby-sass@0.7.1 node_modules/gulp-ruby-sass
├── dargs@0.1.0
├── slash@0.1.3
├── each-async@0.1.3
├── win-spawn@2.0.0
├── chalk@0.5.1 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── glob@4.3.1 (inherits@2.0.1, once@1.3.1, inflight@1.0.4, minimatch@2.0.1)
└── gulp-intermediate@3.0.1 (rimraf@2.2.8, uuid@1.4.2, mkdirp@0.5.0, through2@0.5.1, gulp-util@2.2.20)

gulp-ruby-sassのオプション指定

require('gulp-sass')をrequire('gulp-ruby-sass')に置き換えます。gulp-ruby-sassはオブジェクトsass({})でオプションを渡します。bundlerを使っている場合、bundleExecオプションを有効{ bundleExec: true }にします。bundleExecを省略できるようにしている場合はbundleExecオプションは不要です。

var gulp      = require('gulp');
var sass      = require('gulp-ruby-sass'); //<-
var connect   = require('gulp-connect');
var plumber   = require('gulp-plumber');
var notify    = require('gulp-notify');

var paths = {
  srcDir : 'src',
  prvDir : 'prv',
  dstDir : 'prd'
}

gulp.task('sass:prv', function(){
  var srcGlob = paths.srcDir + '/assets/_scss/*.scss';
  var dstGlob = paths.prvDir + '/assets/css';
  var errorMessage = "Error: <%= error.message %>";
  var sassOptions = {
    //bundleExec : true,
    style      : 'nested'
  }

  gulp.src( srcGlob )
    .pipe(plumber({
      errorHandler: notify.onError( errorMessage )
    }))
    .pipe(sass( sassOptions )) //<-
    .pipe(gulp.dest( dstGlob ))
    .pipe(connect.reload());
});

オプションの詳細はgulp-ruby-sassのAPIの項に載っています。

bourbonやneatを読み込む

bourbonやneatを読み込むにはSassオプションのrequireを使います。requireには配列で読み込むLibraryを指定します。

var gulp      = require('gulp');
var sass      = require('gulp-ruby-sass');
var connect   = require('gulp-connect');
var plumber   = require('gulp-plumber');
var notify    = require('gulp-notify');

var paths = {
  srcDir : 'src',
  prvDir : 'prv',
  dstDir : 'prd'
}

gulp.task('sass:prv', function(){
  var srcGlob = paths.srcDir + '/assets/_scss/*.scss';
  var dstGlob = paths.prvDir + '/assets/css';
  var errorMessage = "Error: <%= error.message %>";
  var sassOptions = {
    style      : 'nested',
    require    : ['bourbon', 'neat'] //<-
  }

  gulp.src( srcGlob )
    .pipe(plumber({
      errorHandler: notify.onError( errorMessage )
    }))
    .pipe(sass( sassOptions ))
    .pipe(gulp.dest( dstGlob ))
    .pipe(connect.reload());
});

これで、bourbonやneatが@importして使えるようになります。

@import 'bourbon';
@import 'neat';

ちなみにboubonやneatをgulp-sassで使いたい場合はnode-bourbon、node-neatが使えるようです。

loadPathを指定して読み込む

bourbonプロジェクトにbittersというLibraryがあります。このLibraryはrequireには対応していないためパスを指定してロードするか$ bitters installで作られたファイルをインポートする方法があります。bundlerでインストールしたbittersであれば下記のようにloadPathを指定して読み込むことができます。

  var sassOptions = {
    style      : 'nested',
    require    : ['bourbon', 'neat'],
    loadPath   : ['vendor/bundle/ruby/2.1.0/gems/bitters-0.10.1/app/assets/stylesheets']
  }

SCSSにインポートするには@import 'base'を指定します。以上、gulp-ruby-sassの使い方でした。明日はgulp-connectからgulp-webserverへの移行を試してみたいと思います。

シリーズ

CSS の状態管理にカスタムデータ属性を使う

2016-11-19
CSS, SCSS, JavaScript, jQuery

Prism CSS naming conventions（オレオレスタイルガイド）

2015-03-11
CSS, Sass, SCSS

Sass/SCSSでSMACSS（モジュール・状態・テーマ）を意識した色の管理方法について模索してみた

2015-03-06
Design, Sass, SCSS

初めてのMiddleman：Sass MixinライブラリのBourbon, Neatを導入してみる

2015-02-03
Middleman 3, SCSS

初めてのMiddleman：SCSSのコンパイルとテンプレートの基礎

2015-02-03
Middleman 3, SCSS

これからはじめる Gulp シリーズこれからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え