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

はじめに

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

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

gulp-sassはnode-sassのwrapperでruby版のSassがなくても動作しコンパイルも早いようです。ただし、.sassだとコンパイルに問題もあるとか（回避策はある）。gulp-ruby-sassは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はgulp-ruby-sassの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への移行を試してみたいと思います。