「坐上时光机，查找编译压缩后的文件最初的样子」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

// 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 类似。

gulp.task('scripts', function() {  // 这个任务的名称是 scripts
  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。

更多内容可以参考官方文档 https://www.npmjs.com/package/gulp-sourcemaps