Исходные карты для моей задачи Gulp Sass не работают

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 By Backtracking:

Отладка путем возврата

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

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

Если вам нужна конкатенация, используйте общий плагин gulp-concat, который хорошо работает с файлами js и css, поэтому замените эту строку на:

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

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

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

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

Надеюсь, поможет.