コンテンツへスキップ
ホーム » [gulp]パッケージをアップデートし、gulpfile.jsをgulp-ruby-sass1.0以降に対応させました。

[gulp]パッケージをアップデートし、gulpfile.jsをgulp-ruby-sass1.0以降に対応させました。

  • by

しばらく放置していた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の中に記述される方式になったようです。

参考サイト

パッケージのアップデートは以下のサイトを参考にさせて頂きました。

Node.jsアプリでのパッケージ更新確認

gulpfile.jsの新しい書式は以下から。
gulp-sass から gulp-ruby-sass へ
gulp-ruby-sass – npm

コメントをどうぞ!