Sourcemaps для моей задачи Gulp Sass dosen't work

Question

У меня проблема с моей задачей Gulp для Sass. Это не создает исходные карты. Проблема только в этой задаче, исходные карты для моего .js прекрасно работают.

Кто-нибудь может проверить мою задачу?

gulp.task('build-css', function() { 
    gulp.src(['src/scss/vendor.scss', 'src/scss/styles.scss']) 
     .pipe(plumber()) 
     .pipe(sourcemaps.init({loadMaps: true})) 
     .pipe(sass.sync()) 
     .pipe(sourcemaps.write())   
     .pipe(concatCss("main.css")) 
     .pipe(autoprefixer({browsers: ['last 10 versions', 'IE 10']}))    
     .pipe(gulp.dest('build/css/')) 
     .pipe(browserSync.stream()); 
}); 

Answer 1

«Научите человека ловить рыбу», ответьте :). Вы можете попробовать отладки этого простого скрипта, используя отладку по отслеживанию методы:

Debugging по возврату

Для небольших приложений, процесс возвратов часто используется эффективно в выявлении ошибок. Чтобы применить этот процесс, начинайте с позиции в приложении, где был создан неправильный вывод, и возвращайтесь назад в приложении на один шаг в экземпляре, духовно отлаживая приложение в обратной последовательности, чтобы получить статус приложения на предыдущем шаге. Таким образом, эта ошибка ограничена среди позиций, в которых статус приложения был ожидаемым, и начальная позиция, в которой ситуация не была предсказуемой.

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

Если вам нужно concatination идти с родовым gulp-concat плагин, который хорошо работает с JS и CSS файлы, так что заменить эту строку с:

.pipe(concat('main.css')) 

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

Вы можете сделать это с помощью:

.pipe(sourcemaps.write('./)) 

Надеется, что это помогает.