javascript - gulp-babel后的代碼uglify后,sourcemaps定位不準
問題描述
有如下ES6代碼
let that = this;let DOMp = document.querySelectorAll(’p’);let DOMpArray = Array.prototype.slice.call(DOMp);console.log(DOMpArray);class Modal { constructor() {console.log(’what’);this.init(); } init() { }}new Modal();
和如下gulp代碼
const uglify = require(’gulp-uglify’);const babel = require(’gulp-babel’);const sourcemaps = require(’gulp-sourcemaps’);const plumber = require(’gulp-plumber’);const chalk = require(’chalk’);gulp.task(’js’, function () { console.log(chalk.yellow(’[進行中] js(!entry_*.js ES6->ES5)’)); return gulp.src(’dev/js/test.js’).pipe(plumber()).pipe(sourcemaps.init()).pipe(babel()).pipe(uglify()).pipe(sourcemaps.write(’./maps’)).pipe(gulp.dest(`./static/js/`)).on(’end’, function () { console.log(chalk.green(’[已完成] js(!entry_*.js ES6->ES5)’));});});
瀏覽器執行生成的js輸出到控制臺的內容,點擊文件定位到的代碼行不對。是我用法有問題嗎?
問題解答
回答1:位置錯了。
const uglify = require(’gulp-uglify’);const babel = require(’gulp-babel’);const sourcemaps = require(’gulp-sourcemaps’);const plumber = require(’gulp-plumber’);const chalk = require(’chalk’);gulp.task(’js’, function () { console.log(chalk.yellow(’[進行中] js(!entry_*.js ES6->ES5)’)); return gulp.src(’dev/js/test.js’).pipe(sourcemaps.init()) // <------ 這里.pipe(plumber()) // <------ 這里.pipe(babel()).pipe(uglify()).pipe(sourcemaps.write(’./maps’)).pipe(gulp.dest(`./static/js/`)).on(’end’, function () { console.log(chalk.green(’[已完成] js(!entry_*.js ES6->ES5)’));});});
參考:
https://stackoverflow.com/que...
https://fettblog.eu/gulp-4-so...
