gulp-ruby-sass 0.6 にアップデートしたらコケた話

Sass 3.3 から利用できるようになったマップで変数を連想配列のように定義しておきたいと考え、少し前から導入していた gulp-ruby-sass。

昨日「最新版リリースしたよ」とのツイートを見かけていて、早速アップデートしたところ、@import で指定した .scss ファイルが読み込めず、タスクが途中でコケるようになりました orz...

配布元の issue によると、loadPath オプションに「process.cwd()」と書けば、現在のプロジェクトディレクトリを基準にできる様子。

@import behaviour in 0.6.0 #78:
https://github.com/sindresorhus/gulp-ruby-sass/issues/78

こちらを参考に調整してみました。

やったこと

まず、gulp-sass から gulp-ruby-sass に切り替えます。
Bundler などで、別途 Sass がインストールしてある前提なので、ご注意を。

$ npm uninstall --save-dev gulp-sass
$ npm install --save-dev gulp-ruby-sass

gulpfile.js は以下のように調整しました。

// task.sass
gulp.task('sass', function(){
    return gulp.src(['*.scss'], {cwd: dir.src + '/' + dir.scss})
            .pipe($.rubySass({
                loadPath: process.cwd() + '/' + dir.src + '/' + dir.scss
            }))
            .pipe(gulp.dest(dir.src + '/' + dir.css));
});

// task.pleeease
gulp.task('pleeease', function() {
    return gulp.src('*.css', {cwd: dir.src + '/' + dir.css})
            .pipe($.csscomb())
            .pipe($.pleeease({
                fallbacks: {
                    autoprefixer: ['last 2 version', 'ie 8', 'ie 9']
                },
                optimizers: {
                    minifier: true
                }
            }))
            .pipe($.bless())
            .pipe(gulp.dest(dir.htdocs + '/' + dir.css))
});

gulp-csscomb と gulp-bless の基準パスにも影響が出たため、gulp-pleeease の前後に移動しました。以前はこれだとエラーになったハズなのですが、アップデートでエラーにならなくなったようです。

これで、問題なく処理が完了するようになりました。

やってみて

アップデートの頻度が高くて、より便利になるのはありがたいものの。
それまで問題なく使えていたものが動かなくなると、焦りますね。

ちゃんと理解できる自信がなくても、issue とかはマメにチェックしようと思います(。-_-。)