source Map

簡(jiǎn)單說，Source map就是一個(gè)信息文件，里面儲(chǔ)存著位置信息。也就是說，轉(zhuǎn)換后的代碼的每一個(gè)位置，所對(duì)應(yīng)的轉(zhuǎn)換前的位置。有了它，出錯(cuò)的時(shí)候，除錯(cuò)工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼。這無疑給開發(fā)者帶來了很大方便。

下面我們來通過gulp生成我們的map文件

1.首先，全局安裝gulp

cnpm install gulp -g

2.安裝到項(xiàng)目目錄

cnpm install gulp --save-dev

3.安裝js壓縮模塊

cnpm install gulp-uglify --save-dev

4.安裝sgulp-sourcemaps

cnpm install gulp-sourcemaps --save-dev

5.本地創(chuàng)建gulpfile.js文件,并配置

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('jsmin', function() {
  gulp.src('private/*.js')//準(zhǔn)備要壓縮的js
    .pipe(sourcemaps.init())
    .pipe(uglify())//壓縮sj
    .pipe(sourcemaps.write('../maps'))//輸出map文件
    .pipe(gulp.dest('dist'));//輸出壓縮后的js文件，默認(rèn)最后會(huì)帶有map文件的路徑
});