Question

我开始尝试使用gulp.js。

我曾经使用过gssnt sass包生成CSS源图，我可以使用它来调试我的sass。我目前正在使用gulp-ruby-sass来生成CSS。

在流程结束时，没有生成源地图，CSS文件中没有源地图引用。

我的gulpfile看起来像这样：

/* 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源图插件来实现这一点。我想有一天我已经做出了改变，与Gulp 4进行了更好的整合。无论如何，这是我在这个主题上写的一篇文章：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'));
});

使用gulp时如何获得生成CSS源图的麻烦？

1 个答案: