用户投稿昨天我们已经介绍 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']);那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷
微信扫一扫打赏
支付宝扫一扫打赏
