Sourcemaps scss?

Question

[LilTangy]

function css() {
	return src('./src/assets/scss/style.scss', {sourcemaps: true})
		.pipe(plumber({
			errorHandler: function (err) {
				notify.onError({
					title: 'SCSS Error',
					message: 'Error <%= error.message %>'
				})(err);
				this.emit('end');
			}
		}))
		.pipe(sass({sourceComments: 'map'}))
		.pipe(sourcemaps.init({loadMaps: true}))
		.pipe(sourcemaps.write())
		.pipe(groupCssMediaQueries())
		.pipe(autoprefixer())
		.pipe(cssbeautify())
		.pipe(dest(path.build.css))
		.pipe(cssnano({
			zindex: false,
			discardComments: {
				removeAll: true
			}
		}))
		.pipe(removeComments())
		.pipe(rename({
			suffix: '.min',
			extname: '.css'
		}))
		.pipe(dest(path.build.css))
		.pipe(browserSync.reload({stream: true}))
}

Делал все по документации, между функциями init() и write() нет плагинов, которые не поддерживаются, write() поставил перед выгрузкой не сжатого css в конечную папку. Но не пишет карты все равно. Если поставлю write() перед выгрузкой сжатой версии css, то тогда он напишет карты правильно, но для файла не сжатого css. То есть, в картах мне нужно, что бы написано было название файла footer.scss и номер строки в этом файле, а он пишет style.ccs и по этому файлу стилей пишет карту. Номер строки указывает правильно для файла style.css, но я же стили пишу в файлах scss

Comments

[Алан Гибизов]

См.п.3.6

Answer 1

[Сергей delphinpro]

так у вас init и write идут сразу друг за другом

function css() {
  return src('./src/assets/scss/style.scss', {sourcemaps: true})
    ...
+   .pipe(sourcemaps.init())
-   .pipe(sass({sourceComments: 'map'}))
+   .pipe(sass())
-   .pipe(sourcemaps.init({loadMaps: true}))
-   .pipe(sourcemaps.write())
    .pipe(groupCssMediaQueries())
    ...
    .pipe(rename({
      suffix: '.min',
      extname: '.css'
    }))
+   .pipe(sourcemaps.write('.'))
    .pipe(dest(path.build.css))
    .pipe(browserSync.reload({stream: true}))
}

Comments

[LilTangy]

В документации написано было, чтоб между init и write не было плагинов, которые не поддерживаются, а у меня все такие плагины, поэтому я сразу и написал
Но все равно ваш код не отрабатывает, в картах пишет файл style.scss, а должен footer.scss

[Сергей delphinpro]

LilTangy, попробуйте убрать {sourcemaps: true} в src. Оставьте генерацию карт полностью на откуп плагина

[Сергей delphinpro]

LilTangy, и еще, я сразу не обратил внимания. Вы пишете два файла на выходе - сжатый и не сжатый, карта генерится для сжатого. Если вы подключаете несжатый, то для него тоже поставьте вызов записи карты.

[LilTangy]

Сергей delphinpro, благодарю, поставил вызов записи перед выгрузкой сжатого файла, убрал {sourcemaps: true} в src, все работает)
Вот так в общем получилось:

function css() {
return src('./src/assets/scss/style.scss')
.pipe(plumber({
errorHandler: function (err) {
notify.onError({
title: 'SCSS Error',
message: 'Error <%= error.message %>'
})(err);
this.emit('end');
}
}))
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(groupCssMediaQueries())
.pipe(autoprefixer())
.pipe(cssbeautify())
.pipe(dest(path.build.css))
.pipe(cssnano({
zindex: false,
discardComments: {
removeAll: true
}
}))
.pipe(removeComments())
.pipe(rename({
suffix: '.min',
extname: '.css'
}))
.pipe(sourcemaps.write())
.pipe(dest(path.build.css))
.pipe(browserSync.reload({stream: true}))
}

Единственное, чего я не понимаю, это почему это все работает, ведь я использую очень много плагинов, которых нет в списке поддерживаемых для плагина sourcemaps. В заблуждение вводят получается

[LilTangy]

Сергей delphinpro, не знаю как это так получается, час назад у меня все работало, сейчас же нет. Так же пишет мне неправильную карту, код я не менял, на всякий случай скопировал отсюда и вставил в свой галпфайл, в итоге все снова не работает, хотя час назад работало

[LilTangy]

Данная функция работает не во всех моментах, если я импортирую в свой главный style.scss много файлов, то карта пишется некорректная