最近在使用gulp構建項目，在編譯sass的時候遇到了sourcemaps，查閱了相關資料，大概弄懂了它是個神馬，以及如何生成使用。
首先，從名字可以看出sourcemaps是生成文件到源文件的一個映射，也就是sourcemaps記錄了生成文件中的每一條語句在源文件中的對應位置。以gulp編譯sass爲例（假設你對gulp已經有了一定了解）：
1. 先安裝gulp-sourcemaps，命令爲：npm install --save-dev gulp-sourcemaps
2. 在gulpfile.js中引用它：sourcemap = require( 'gulp-sourcemaps' )
3. 建立一個任務
gulp.task( 'sass', function() {
return gulp.src( ['./src/css/index.scss'] ) //後綴爲scss
.pipe( sourcemap.init() ) //初始化
.pipe( sass({outputStyle: 'compressed'}) )
.pipe( sourcemap.write( './maps' ) ) //生成sourcemap文件，路徑爲./maps
.pipe( gulp.dest( './des/dist/' ) )
} );
這樣在命令行中運行該任務：gulp sass，就可以生成sourcemaps文件了
在html中引入生成的css文件，谷歌瀏覽器打開該html文件，我們就能夠看到下圖。
標紅的部分可以看到對應的樣式文件是scss，點擊進入就能夠找到這個樣式對應在scss文件中的位置了。
調試起來就方便啦！
純手打，如有錯誤，歡迎指正！
