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

Question

我对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()); 
}); 

Answer 1

“教男人钓鱼”类的回答:)。你可以尝试使用调试后跟踪方法调试运行这个简单的脚本：通过回溯

对于小型应用

调试，回溯的过程中识别错误经常使用效率。要应用此过程，请从出现错误输出的应用程序中的位置开始，然后在应用程序中向后倒退一步，在精神上调试应用程序以向后顺序，以获取上一步中应用程序的状态。以这种方式持久地，该错误被限制在应用程序的状态是预期的位置和情况不是可预测的初始位置之间。

应用此方法将意味着一行一行地删除，直到您发现错误的管道。在这种情况下，这将是gulp-concat-css插件，这是不正确地处理您的源地图更新。

如果您需要concatination与通用gulp-concat插件，用JS和CSS文件，效果很好走，所以将其替换该行：

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

此外，我更喜欢外部映射文件，这样我就可以从生产部署中排除服务器，并且通常保存您需要在生产环境中部署的.css文件大小。

你可以做到这一点：

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

希望它能帮助。