昨天我們已經介紹 babel編譯 與 concat合併成一支檔案
但我們還沒介紹 Source Map 的運用
不過在介紹 Source Map 之前
我們先在 index.jade 載入編譯後的 js 檔案
皮傑先生
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
script(src="js/all.js")
body
並在 js 檔案分別執行函式
all.js
let Fn = ()=>{
console.log('a');
}
Fn();
all2.js
let Fn2 = ()=>{
console.log('a');
}
Fn2();
這時候輸入 gulp 並開啟網頁
會發現
它的來源都是來自編譯後的 js 檔案
但當很多程式碼的時候
我們很難找到對應的檔案
所以這時候 Source Map 就可以解決此問題
由於我們昨天已經有加
npm install gulp-sourcemaps --save
若昨天沒有加 必須補上
接著加入
.pipe($.sourcemaps.init())
.pipe($.sourcemaps.write('.'))
加完後的結果
gulp.task('babel', () =>
gulp.src('./source/js/**/*.js')
.pipe($.sourcemaps.init())
.pipe($.babel({
presets: ['@babel/env']
}))
.pipe($.concat('all.js'))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('./public/js'))
);
接著輸入 gulp
會發現此時的來源已經不是 編譯後的js
而是原本的js
除了 js 可以加上 Source Map
css也可以增加
一樣在 index.jade 載入css
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Document
link(rel="stylesheet", href="css/all.css")
script(src="js/all.js")
body
不過它是寫在 all.css下
這時加上
.pipe($.sourcemaps.init())
.pipe($.sourcemaps.write('.'))
加入後結果
gulp.task('sass', function () {
return gulp.src('./source/scss/**/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass().on('error', $.sass.logError))
.pipe($.postcss([autoprefixer()]))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest('./public/css'));
});
呈現
最後在 watch 補上
gulp.watch('./source/js/**/*.js', ['babel']);
那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷
iThome鐵人賽
看影片追技術