gulp-sourcemaps 瀏覽連結

打包的時候產生一個map檔案，記錄哪些程式碼在哪個原始檔案的做mapping，出錯的時 Error Handler 可以利用這個檔案顯示正確的錯誤行數，否則只是顯示bundle的行數是沒有意義的

安裝 NPM

npm install gulp-sourcemaps --save-dev

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

使用

var gulp = require('gulp');             // 載入 gulp
var Sass = require('gulp-sass');    // 載入 gulp-sass
var sourcemaps = require('gulp-sourcemaps');//打包產生一個map檔

gulp.task('sass', function () { // 定義 sass 的任務名稱
  return gulp.src('./styles/**/*.scss') // 指定要處理的 Scss 檔案目錄
      .pipe(plumber())                    // 使用 gulp-plumber 處理例外
    .pipe(Sass()) // 編譯 Scss

    .pipe(sourcemaps.init())//打包產生一個map檔
    .pipe(sourcemaps.write('.'))//map檔位置

    .pipe(gulp.dest('./tmp/css')) // sass 編譯完成後的匯出資料夾
    .pipe(cleanCSS()) //壓縮＆重新命名
    .pipe(rename(function(path){
        path.basename += ".min";
    }))
    .pipe(gulp.dest('./html/assets/css'))
    .pipe(livereload());  //當檔案有修改儲存自動更新頁面
});

執行

$ gulp sass
[17:31:07] Using gulpfile ~/gulpfile.js
[10:55:31] Starting 'sass'...
[10:55:31] Finished 'sass' after 39 ms

產生