しばらく放置していたgulpのパッケージをアップデートしました。最新版になって気持ちが良いです！
「gulp-ruby-sass」を使っているのですが、アップデート後、バージョンが1.0.5となりました。1.0以降はタスクの書式が変わるらしく、gulpfile.jsの記述変更も実施。
元から抱えていたソースマップとベンダープレフィックスの不具合も修正し、(自分の環境で)うまく動作するようになりました。
以下、実際のコードになります。
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var plumber = require("gulp-plumber");
var autoprefixer = require("gulp-autoprefixer");
var sourcemaps = require('gulp-sourcemaps');
gulp.task("sass", function() {
return sass('sass/', { //コンパイルしたいscssファイルを、「sass」ディリクトリに全て配置する
sourcemap: true ,
style: 'expanded'
})
.pipe(plumber())
.pipe(autoprefixer("last 3 version"))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
gulp.watch('sass/**/*.scss', ['sass']);
});
scssファイルのコンパイル(出力スタイルはexpanded)、ソースマップの出力、ベンダープレフィックスの付与ができます。ライブリロードとか使ってみたいパッケージが他にもありますが、それはおいおいで。
今までソースマップは独立したファイルとして出力されていましたが、今回の修正でdestされたcssの中に記述される方式になったようです。
参考サイト
パッケージのアップデートは以下のサイトを参考にさせて頂きました。
gulpfile.jsの新しい書式は以下から。
gulp-sass から gulp-ruby-sass へ
gulp-ruby-sass – npm