我的 Gulp Sass 任务的源图不起作用答案

【问题标题】：Sourcemaps for my Gulp Sass task dosen't work我的 Gulp Sass 任务的源图不起作用
【发布时间】：2016-11-27 21:40:36
【问题描述】：

我的 Sass 的 Gulp 任务有问题。这不会生成源映射。问题只是这个任务，我的.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());
});

【问题讨论】：

标签： gulp gulp-sass gulp-sourcemaps

【解决方案1】：

“教人钓鱼”之类的答案:)。您可以尝试使用 Debugging By Backtracking 方法调试这个简单的脚本：

回溯调试

对于小型应用程序，回溯过程经常有效地用于识别错误。要应用这个过程，从应用程序中产生错误输出的位置开始，在应用程序中逐个实例倒退，以倒序精神调试应用程序，以获取上一步应用程序的状态。以这种方式持续存在，错误被限制在应用程序的状态是预期的位置和情况不可预测的初始位置之间。

应用此方法意味着逐行删除，直到您发现有漏洞的管道。在这种情况下，这将是 gulp-concat-css 插件，它没有正确处理您的源映射更新。

如果您需要连接，请使用适用于 js 和 css 文件的通用 gulp-concat 插件，因此将该行替换为：

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

我也更喜欢外部地图文件，因此我可以将它们从生产服务器上的部署中排除，并且通常节省您需要在生产中部署的 .css 文件大小。

你可以这样做：

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

希望对你有帮助。

【讨论】：