Как заставить gulp-sourcemap работать корректно?

Question

[Сергей delphinpro]

Почему-то gulp-sourcemaps генерирует некорректные карты кодов.
Есть задача написать task, который будет обрабатывать sass-исходники, дописывать вендорные префиксы и сжимать css в режиме "compact" (в терминологии sass-compass).
Используем gulp-sourcemaps + gulp-compass + gulp-autoprefixer. Пишем:

gulp.src('src/sass/')
	.pipe(plumber())
	.pipe(sourcemaps.init())
	.pipe(compass({
		style    : 'compact',
		sourcemap: false,
		css      : 'build/css/',
		sass     : 'src/sass/'
	}))
	.pipe(prefixer())
	.pipe(sourcemaps.write('.'))
	.pipe(gulp.dest('build/css/'))
	.pipe(connect.reload());

В результате полученную карту firefox не читает :(, т.е. не показывает адресацию на исходные sass-файлы.
Если мы выбросим sourcemaps и autoprefixer, то сам compass будет генерировать вполне корректную карту.

gulp.src('src/sass/')
	.pipe(plumber())
	.pipe(compass({
		style    : 'compact',
		sourcemap: true,
		css      : 'build/css/',
		sass     : 'src/sass/'
	}))
	.pipe(gulp.dest('build/css/'))
	.pipe(connect.reload());

Пробовал вместо gulp-compass использовать gulp-sass, результата - ноль, карты некорректные.

UPD 11.11.2015
Сегодня решил вернуться к картам. Поставил последнюю версию пакета gulp-sourcemaps и все завелось без шаманства всё с теми же тасками, что описаны выше.

Answer 1

[Андрей Пастухов]

Внутри плагина gulp-sourcemaps должны быть плагины, которые поддерживаются им (на странице плагина так и написано: All plugins between sourcemaps.init() and sourcemaps.write() need to have support for gulp-sourcemaps. ). Поддерживаемые плагины: wiki

Comments

[Сергей delphinpro]

Убрал все, оставив только gulp-sass и gulp--autoprefixer. Оба они есть в списке поддерживаемых, но firefox по прежнему не показывает исходники в инспекторе. В chrome даже смотреть не стал :(((((

[Андрей Пастухов]

Сергей: можно увидеть таск с gulp-sourcemaps и gulp-sass?
Еще может быть стоит обновить используемые плагины?
Например, https://goo.gl/hTc3mq - так в firefox у меня карта работает, за исключением подключаемых внешних библиотек при помощи опции includePaths.

[Петр Павлюк]

так и есть, между sourcemaps.init() и sourcemaps.write() стоял autoprefixer и removeEmptyLines. Убрал второй (на него нет поддержки) и sourcemaps заработал в Chrome

[Антон]

Петр Павлюк: У меня как раз из-за автопрефиксера ни черта не пашет, а именно в лисе, даже без него инспектор отдает некорректные лайны в исходных sass файлах

[Аркадий Кожедуб]

До сих пор имеются какие-то проблемы между плагинами gulp-sourcemaps и gulp-autoprefixer, решение нашел в этом топике.

если кратко то перед autoprefix нужно добавить вот эти 2 строки:

...
.pipe(sourcemaps.write({includeContent: false}))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer())
...

[Сергей Бурдужа]

Убрал несколько плагинов и заработало

/* css:build
====================================================*/
gulp.task("css:build", function(){
    gulp.src(path.src.css)
        .pipe(sourcemaps.init())
        //.pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer())
        //.pipe(removeComments())
        //.pipe(cssbeautify())
        //.pipe(csscomb())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css))
        .pipe(browserSync.stream())
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(rename("style.min.css"))
        .pipe(gulp.dest(path.build.css));
});

Answer 2

[Ярослав Гончаров]

Та же ситуация, но с gulp-sass. Карты, которые генерит gulp-sourcemaps при дебаге в хроме не показывает ссылки на исходники. При этом если то же самое запилить через родной ruby sass всё чётко. Есть идеи?

Comments

[maxbass]

Привет! Подскажи пожалуйста как решил проблему? gulp-sourcemaps не генерит ссылку на переменные

Answer 3

[faragly]

У меня те же проблемы, решить пока не удается. Единственное что понял так это то что надо между sourcemaps.init() и sourcemaps.write() отключать по одному потоки и смотреть карты, я таким образом нашел 1 поток, который все портит, после его отключения названия и строки стали показываться верно, но не решилась другая проблема - при переходе на файл (он не в другом файле, а внутри css) отображается пустой файл. Проблема в путях если карта содержит подпапки, то путь получает /source/scss/blocks/blocks/main.scss - явно лишний /blocks/ от которого непонятно как избавляться.