在使用gulp时，如何让sass生成CSS源地图？

Question

我已经开始尝试使用gulp.js了。

我习惯于使用sass包生成CSS源地图，我可以用它来调试我的sass。我目前正在使用gulp-ruby-sass来生成CSS。

在该过程结束时，不会生成任何源映射，并且CSS文件中也没有源映射引用。

我的插口文件看起来像这样：

/* load plugins */
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    browsersync  = require('browser-sync'),
    reload = browsersync.reload;


/*
*  define tasks
*/

gulp.task('sass', function() {
    return sass('assets/sass/main.sass', { sourcemap : true })
    .pipe(gulp.dest('assets/css'))
    .pipe(reload({stream : true})) ;
}) ;


/*
*  browsersync conf
*/

gulp.task('browser-sync', function() {
    browsersync({
    proxy: 'neat',
    port: '3000'
    });
});

gulp.task('browsersync-reload', function () {
    browsersync.reload();
});

gulp.task('watch', ['browser-sync'], function () {
  gulp.watch('assets/sass/**/*', ['sass']);
});


/* Default task */
gulp.task('default', ['sass'], function() {
    gulp.watch("assets/sass/**.*", ['sass']);
});

Answer 1

gulp-ruby-sass 1.0已经有了突破性的变化，现在它有了一个相当奇怪的行为(尽管他们肯定有一些原因……只是不知道是哪一个;-))

但是看起来你不仅要告诉Sass你正在使用源地图，而且还必须使用Gulps源地图插件来实现这一点。我猜这个变化是为了有一天能更好地与Gulp4集成。不管怎样，我写了一篇关于这个主题的文章：http://fettblog.eu/blog/2014/04/10/gulp-sass-autoprefixer-sourcemaps/

要点如下：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('default', function () {
    return sass('app.scss', {sourcemap: true, style: 'compact'})
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'));
});