Gulp 内联源映射不工作
Gulp inline sourcemaps not working
我正在尝试让 sourcemaps 与 Gulp 一起工作。我正在使用 gulp-ruby-sass 和 gulp-sourcemaps.
内联源映射被插入到 CSS 文件中,但它在 Chrome 中仍然不起作用,即使我已经启用了源映射。我仍然只能看到对 CSS 文件的引用,而不是 sass 文件。
这是我的 gulp 文件中的 sass 任务:
gulp.task('sass', function() {
return sass('src/sass/main.scss', { sourcemap: true, style: 'expanded' })
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.init())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/assets/css/'))
.pipe(connect.reload());
});
我的 CSS 文件中的内联源映射如下所示:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIubmF2aWdhdGlvbi1tYWluX19saXN0IHtcclxuICBkaXNwbGF5OiBpbmxpbmU7XHJcbiAgcGFkZGluZzogMDtcclxuICBtYXJnaW46IDA7XHJcbn1cclxuXHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW0ge1xyXG4gIHBhZGRpbmc6IDAgMTBweDtcclxuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XHJcbiAgZGlzcGxheTogaW5saW5lO1xyXG59XHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW06Zmlyc3Qge1xyXG4gIHBhZGRpbmctbGVmdDogMDtcclxufVxyXG4ubmF2aWdhdGlvbi1tYWluX19pdGVtOmxhc3Qge1xyXG4gIHBhZGRpbmctcmlnaHQ6IDA7XHJcbn1cclxuXHJcblxyXG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0= */
我将 base64 解码成这样:
{"version":3,"file":"main.css","names":[],"mappings":"","sources":["main.css"],"sourcesContent":[".navigation-main__list {\r\n display: inline;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\n.navigation-main__item {\r\n padding: 0 10px;\r\n list-style-type: none;\r\n display: inline;\r\n}\r\n.navigation-main__item:first {\r\n padding-left: 0;\r\n}\r\n.navigation-main__item:last {\r\n padding-right: 0;\r\n}\r\n\r\n\r\n"],"sourceRoot":"/source/"}
这样看起来对吗?我不确定它的外观,但我认为 scss 文件名引用应该在那里?
就是无法正常工作!
尝试删除这个:
.pipe(sourcemaps.init())
我假设您使用的是 1.0.0-alpha.x
版本的 gulp-ruby-sass:
https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#sourcemap
我正在尝试让 sourcemaps 与 Gulp 一起工作。我正在使用 gulp-ruby-sass 和 gulp-sourcemaps.
内联源映射被插入到 CSS 文件中,但它在 Chrome 中仍然不起作用,即使我已经启用了源映射。我仍然只能看到对 CSS 文件的引用,而不是 sass 文件。
这是我的 gulp 文件中的 sass 任务:
gulp.task('sass', function() {
return sass('src/sass/main.scss', { sourcemap: true, style: 'expanded' })
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.init())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/assets/css/'))
.pipe(connect.reload());
});
我的 CSS 文件中的内联源映射如下所示:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLmNzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIubmF2aWdhdGlvbi1tYWluX19saXN0IHtcclxuICBkaXNwbGF5OiBpbmxpbmU7XHJcbiAgcGFkZGluZzogMDtcclxuICBtYXJnaW46IDA7XHJcbn1cclxuXHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW0ge1xyXG4gIHBhZGRpbmc6IDAgMTBweDtcclxuICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XHJcbiAgZGlzcGxheTogaW5saW5lO1xyXG59XHJcbi5uYXZpZ2F0aW9uLW1haW5fX2l0ZW06Zmlyc3Qge1xyXG4gIHBhZGRpbmctbGVmdDogMDtcclxufVxyXG4ubmF2aWdhdGlvbi1tYWluX19pdGVtOmxhc3Qge1xyXG4gIHBhZGRpbmctcmlnaHQ6IDA7XHJcbn1cclxuXHJcblxyXG4iXSwic291cmNlUm9vdCI6Ii9zb3VyY2UvIn0= */
我将 base64 解码成这样:
{"version":3,"file":"main.css","names":[],"mappings":"","sources":["main.css"],"sourcesContent":[".navigation-main__list {\r\n display: inline;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\n.navigation-main__item {\r\n padding: 0 10px;\r\n list-style-type: none;\r\n display: inline;\r\n}\r\n.navigation-main__item:first {\r\n padding-left: 0;\r\n}\r\n.navigation-main__item:last {\r\n padding-right: 0;\r\n}\r\n\r\n\r\n"],"sourceRoot":"/source/"}
这样看起来对吗?我不确定它的外观,但我认为 scss 文件名引用应该在那里?
就是无法正常工作!
尝试删除这个:
.pipe(sourcemaps.init())
我假设您使用的是 1.0.0-alpha.x
版本的 gulp-ruby-sass:
https://github.com/sindresorhus/gulp-ruby-sass/tree/rw/1.0#sourcemap