yeoman - Gulp webapp ジェネレーター sass ソースマップ

Question

Sass ソースマップを動作させることができません。これを gulpfile に設定します。

Sass タスク スニペット フォーム Gulpfile:

gulp.task('styles', function () {
    return gulp.src('app/styles/main.scss')
        .pipe($.rubySass({
            style: 'expanded',
            precision: 10,
            sourcemap: true
        }))
        .pipe($.autoprefixer('last 1 version'))
        .pipe(gulp.dest('.tmp/styles'))
        .pipe(reload({stream:true}))
        .pipe($.size());
});

main.css.mapファイルは実際には.tmp/stylesnext の下に生成されますmain.cssが、ブラウザによって読み取られません。私はgenerator-gulp-webappフォーム yeoman をBrowserSyncで使用しています。

gulpfile からの BrowserSync スニペット:

gulp.task('serve', ['styles'], function () {
    browserSync.init(null, {
        server: {
            baseDir: ['app', '.tmp'],
            directory: true
        },
        debugInfo: false,
        open: false,
        host: "localhost"
    }, function (err, bs) {
        require('opn')(bs.options.url);
        console.log('Started connect web server on ' + bs.options.url);
    });
});