如何使用uglifyjs2和Ionic加載sourcemaps？

對於我的Ionic應用程序，我正在使用一些吞嚥任務來縮小Javascript代碼。 Uglifyjs2 minifies代碼：如何使用uglifyjs2和Ionic加載sourcemaps？

gulp.task('uglify',() => { 
    gulp.src(paths.uglify) 
    .pipe(uglify('app.min.js', { 
     outSourceMap: true 
    })) 
    .pipe(gulp.dest('./www/dist/js-uglify')); 
});

這產生

www 
| dist 
| | js-uglify 
| | | app.min.js 
| | | app.min.js.map

app.min.js因此與//# sourceMappingURL=app.min.js.map

在我的index.html結束文件我有以下幾點參考：

<script src="dist/js-uglify/app.min.js"></script>

當我通過ionic run構建並運行我的應用程序時，加載了文件app.min.js。但是，sourcemap缺失。 Chrome似乎設置正確（選項Enable JavaScript source maps已設置）。

我該如何解決這個問題？傳輸文件的網絡列表是否應包含源映射的條目？我能以某種方式手動強制Chrome加載地圖嗎？

來源

2016-07-15 Bastian

我不熟悉uglifyjs，但快速查看some ionic software，它在線使用它表明，也許你沒有正確配置你的標誌。它看起來像你要跑

uglifyjs [input files] [options]

使用選項--source-map output.js.map。

好吧，另一件可能相關的事情：根據gruntjs GitHub，sourceMappingURL標誌不再起作用。

版本3.x引入更改配置源映射 ...

sourceMappingURL - 這是自動計算現在sourceMapPrefix - 不再需要上述原因...

sourceMap - 只接受一個布爾值。生成的地圖具有默認名稱爲您sourceMapRoot - 的源位置現在爲您計算時sourceMap設置爲true，但如果需要的話

您可以手動設定源根所以也許不是使用sourceMappingURL你應該只需將布爾值設置爲true？希望這可以幫助！

來源

2016-07-24 06:14:07

gulp-uglifyjs is deprecated.您的源地圖可能沒有正確創建。

當前最好的做法是使用下面的模塊來醜化/ CONCAT/sourcemap您的代碼：

吞-醜化
吞-的concat
吞-sourcemaps

實施例：

var gulp = require('gulp'); 
var uglify = require('gulp-uglify'); 
var concat = require('gulp-concat'); 
var sourcemaps = require('gulp-sourcemaps'); 
gulp.task('build-js', function() { 
    return gulp.src('app/**/*.js') 
    .pipe(sourcemaps.init()) 
    .pipe(uglify()) 
    .pipe(concat('app.min.js')) 
    .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../app' })) 
    .pipe(gulp.dest('dist')); 
});

此外，在Chrome中，app.min.js.map文件未顯示在Network選項卡中。如果您的源地圖在橙色文件夾中的Sources選項卡中顯示，您就會知道它們是否已加載。

來源

2016-07-24 23:30:10

如何使用uglifyjs2和Ionic加載sourcemaps？

回答

相關問題