内联源映射（使用 gulp-sourcemaps 生成）不起作用答案

【问题标题】：Inline sourcemap (generated with gulp-sourcemaps) not working内联源映射（使用 gulp-sourcemaps 生成）不起作用
【发布时间】：2015-03-18 07:49:05
【问题描述】：

这有点奇怪：

我有一个看起来像这样的 gulp 任务：

gulp.task('less', function () {
  gulp.src('./less/main.less')
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [cleancss]
    }))
    .pipe(sourcemaps.write()) // will write the source maps to ./public/assets/css-dist/maps
    .pipe(gulp.dest(paths.public + 'css/dist'));
});

我在 play 1.3 项目中运行此任务，它按预期生成 base64 编码的内联源映射，但是当我在 chrome 中加载它时，所有样式都映射到 @987654322 的第 1 行@，表示有问题。

现在，它变得奇怪了：如果我在另一个具有相同目录结构的项目中运行相同的任务，指向相同文件的副本，只是在普通 ol' apache 下运行，它会完全按预期工作。输出文件看起来完全一样。

有人知道为什么会这样吗？

FWIW，使用 gulp-uglify 和 gulp-concat 缩小和连接我的 js 时会出现极其相似的情况

【问题讨论】：

标签： gulp playframework-1.x source-maps gulp-less gulp-sourcemaps

【解决方案1】：

试试看您是否可以通过this visualizer tool 可视化差异/映射。如果两个项目之间的两个编译文件完全相同，那么可能是由于您提供/访问文件的方式不同？对于第二个项目，您是否还尝试通过 Chrome 查看源地图？

澄清一下，您不仅在编写内联源映射，而且还嵌入了源，因此所有内容都在编译后的 .css 文件中，外部原始源文件不是引用的源（sourceRoot 将是 /source/）。

【讨论】：