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

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

通过回溯调试

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

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

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

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

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

你可以这样做：

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

希望它有所帮助。

我的Gulp Sass任务的源图无效

1 个答案: