一般我们调试的 js/css 文件都是编译压缩后的，一旦出错很难定位原始的位置，gulp-sourcemaps 的出现帮助我们解决了这个问题。
首先我们看下目录结构：
cssjs a.js b.jssass a.scss b.scssindex.htmgulpfile.jspackage.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 -> cssgulp.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 呢？
更多参考：