source Map
簡單說,Source map就是一個信息文件,里面儲存著位置信息。也就是說,轉換后的代碼的每一個位置,所對應的轉換前的位置。有了它,出錯的時候,除錯工具將直接顯示原始代碼,而不是轉換后的代碼。這無疑給開發者帶來了很大方便。
下面我們來通過gulp生成我們的map文件
1.首先,全局安裝gulp
cnpm install gulp -g
2.安裝到項目目錄
cnpm install gulp --save-dev
3.安裝js壓縮模塊
cnpm install gulp-uglify --save-dev
4.安裝sgulp-sourcemaps
cnpm install gulp-sourcemaps --save-dev
5.本地創建gulpfile.js文件,并配置
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('jsmin', function() {
gulp.src('private/*.js')//準備要壓縮的js
.pipe(sourcemaps.init())
.pipe(uglify())//壓縮sj
.pipe(sourcemaps.write('../maps'))//輸出map文件
.pipe(gulp.dest('dist'));//輸出壓縮后的js文件,默認最后會帶有map文件的路徑
});