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

Question

我对SASS的Gulp任务有问题。这不是生成源sap的。问题仅仅是此任务，我的.js的sourcemaps正常工作。

有人可以检查我的任务吗？

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

"教一个男人钓鱼"的答案:)。您可以尝试通过回溯方法使用调试方法来调试此简单脚本：

通过回溯调试

对于小型应用程序，回溯过程经常用于识别错误。要应用此过程，请从生成错误输出的应用程序中的位置开始，然后在一个实例中向后移动，以向后序列进行精神调试，以在上一步中获取应用程序的状态。持续这种方式，该错误受到限制在申请状态的位置，即预期的状态和情况不可预测的初始位置。

应用此方法将意味着逐行删除，直到发现虫管为止。在这种情况下，它将是gulp-concat-css插件，该插件无法正确处理您的Sourcemaps更新。

如果您需要使用与JS和CSS文件效果很好的通用Gulp-Concat插件一起使用，请用：

替换该行

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

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

您可以使用：

来做到这一点

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

希望它有帮助。