「坐上时光机，查找编译压缩后的文件最初的样子」gulp-sourcemaps 使用说明

一般我们调试的 js/css 文件都是编译压缩后的，一旦出错很难定位原始的位置，gulp-sourcemaps 的出现帮助我们解决了这个问题。

首先我们看下目录结构：

css
js
a.js
b.js
sass
a.scss
b.scss
index.htm
gulpfile.js
package.json

我们的目标是 sass 文件夹中的两个文件合并压缩后，放入 css 文件夹中（命名为 main.min.css），js 文件夹中的两个文件合并压缩后，生成新的文件放在 js 文件夹中（命名为 main.min.js），然后 index.htm 页面引用新生成的两个文件。

我们分别从 css 和 js 的角度来介绍如何使用 gulp-sourcemaps。

css

首先在 chrome 中打开 CSS source maps 的设置，具体方法为 f12 - f1(Settings) - Enable CSS source maps 勾上。

// sass -> css
gulp.task('css', function() {  // 任务名
return gulp.src('sass/*.scss')  // 目标 sass 文件
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
// // 因为我们的 "时光穿梭机" 希望能回退到 sass 文件，所以加在 sass() 前
.pipe(sourcemaps.init())
.pipe(sass())  // sass -> css
.pipe(gulp.dest('css'))
.pipe(minifyCss())  // 压缩 css
.pipe(concat('main.min.css'))  // 合并 css，并命名叫 main.min.css
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'))  // 目标目录
});

注意它的两个 API，sourcemaps.write 一般会在 xx.min.css 输出前调用，而 sourcemaps.init 一般在 sass->css 编译前调用，比如 sass() 前调用，这表示最终生成的 xx.min.css 会回溯到 sass() 调用前，也就是 sass 文件中去寻找 "最初的样子"。



可以尝试将 sourcemaps.init 放到不同的地方，如果放到 sass() 后，那么最终会到 a.css 和 b.css 去寻找。



如果不用 "时光穿梭机"，我们看到的源文件应该就是 main.min.css。

还有一个问题是，如果调用 sourcemaps.write 不给任何参数，不会生成一个 .map 的文件，而是会把映射加在生成的 css 文件中（我们可以打开 main.min.css 看看）。这样很不友好，我们可以给它加个参数，生成一个独立的 .map 文件：

.pipe(sourcemaps.write(''))  // 路径，相对于下一步骤的相对路径，此处 main.min.css 和 main.min.css.map 在一个目录

这时我们再看 main.min.css 文件，后面只跟了一句话，这也是我们常用的方法。

/*# sourceMappingURL=main.min.css.map */

js

js 和 css 类似，首先打开 chrome 中 Enable JavaScript source maps 的设置，将其勾上。

gulp.task('scripts', function() {  // 这个任务的名称是 scripts
return gulp.src('js/+(a|b).js')  //
.pipe(sourcemaps.init())  // 我们希望出错能回溯到最原始的文件，也就是 a.js 和 b.js 中去寻找错误的原因
.pipe(concat('main.min.js'))  // 指定合并并压缩后的文件名
.pipe(uglify())  // 压缩
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('js'));
});

这个时候，如果错误源自 a.js，那么控制台报错，错误文件会指向 a.js。

还有个问题，最终生成的 main.min.css 最后会生成

/*# sourceMappingURL=main.min.css.map */

这样一句话，那么上线前是要移除吗？如果线上没找到 map 文件，查看元素就会指向本文件。js 呢？

更多参考：

https://www.npmjs.com/package/gulp-sourcemaps

JavaScript Source Map 详解

Plugins with gulp sourcemaps support