Gulp Babel ES6 编译(2) DAY84

昨天我们已经介绍 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']);

那今天的介绍就到这里
若有任何问题或内容有误
都可以跟我说唷

<<: 【这些年我似是非懂的 Javascript】Prototype #建构器

>>: 第一位华人Tableau Zen Master 经验分享：成功管控Tableau的三部曲

Day 38 - 在 AWS Lambda 中使用 YOLO 推估 (Inference)

杂谈

Neural network基础架构

杂谈

[2021铁人赛 Day24] Forensics 监识学题目 01

杂谈

Day 5 基本 flask 函式 (2)

杂谈

成为工具人应有的工具包-05 DataProtectionDecryptor

杂谈

[Lesson27] Kotlin - Interface

Interface中的属性只能是抽象的，不允许初始化值，Interface不会保存属性值，实作Int...

开发环境与部署环境不同时的解决方案

我的开发环境是ubuntu20,但是部署环境是ubuntu18；开发的语言是python，出现了一...

14. Log X Notification x Slack

好想被推播啊身为一个负责的工程师，当系统有错误的时候，总是想收到即时推播讯息该怎麽做？上一篇有提...

【Day 24】Google Apps Script - API Blueprint 篇 - Google Docs 转换 API Blueprint 格式(2)

继续介绍昨天主流程里的副程序吧。今日要点：》Google Docs 转换 API Bluepr...

Azure Database for MySQL 手把手基础教学

葛瑞部落格欢迎光顾 Azure Database for MySQL 前置作业一组有效的Azure...