1、項目文件夾中，安裝gulp-sourcemaps插件
npm install --save gulp-sourcemaps
2、gulpfile.js文件，導入要用到的插件。
如：
// 引入gulp
var gulp = require('gulp'); // 引入gulp-concat插件
var concat = require('gulp-concat'); // 引入gulp-uglify插件
var uglify = require('gulp-uglify'); // 引入gulp-sourcemaps插件
var sourceMap = require('gulp-sourcemaps');
3、gulp-sourcemaps 方法介紹
拿個例子說明
gulp.task('sourcemap',function() { gulp.src('./src/*.js') .pipe( sourceMap.init() ) .pipe( concat('all.js') ) .pipe( uglify() ) .pipe( sourceMap.write('../maps/',{addComment: false}) ) .pipe( gulp.dest('./dist/') ) })
1）sourceMap.init( ) 啟用sourcemaps功能
2）sourceMap.write( ) 生成記錄位置信息的sourcemaps文件
經過 concat 和 uglify ，將生成的all.js 與 源文件( src 下的所有js文件 )之間的位置映射信息，生成sourcemaps文件。
sourceMap.write( )，不傳參，將會直接在 all.js 尾部，生成sourcemaps信息。
sourceMap.write( path )，將會在指定的 path，生成獨立的sourcemaps信息文件。如果指定的是相對路徑，是相對於 all.js 的路徑。
無法指定路徑為 src 目錄，否則，sourcemaps文件會生成在 dist 目錄下。
addComment : true / false ; 是控制處理后的文件（本例是 all.js ），尾部是否顯示關於sourcemaps信息的注釋。
不加這個屬性，默認是true。設置為false的話，就是不顯示。
注意：sourceMap.init() 和 sourceMap.write() 之間使用的插件，必須支持 gulp-sourcemaps 插件
4、如何在瀏覽器中，發揮 sourcemaps 的作用？
谷歌瀏覽器中，打開開發者面板，點擊右上角的設置。
下面這兩個紅框的選項，勾選上。
案例中，2.js中有個bug，和其它 js 文件合並壓縮成 all.js 文件。在一個html頁面中，只引用這個 all.js。
在瀏覽器中，打開這個頁面，控制台就會直接顯示造成bug的源文件，點擊即可看到報錯位置。
如果沒有顯示源文件，就刷新下頁面，或者，去瀏覽器的設置中，將那兩個選項勾掉，再勾上。
