Tại sao không gulp-uglify mangling tên biến của tôi?

Question

Tôi có nhiệm vụ sau đây:

var uglify = require('gulp-uglify'); 

gulp.task('scripts', function() { 
    gulp.src('./src/scripts/*.js') 
    .pipe(concat('main.js')) 
    .pipe(uglify()) 
    .pipe(gulp.dest('./dist')); 
}); 

Và 2 file javascript sau, test1.js:

var testOneOutput = 'function one'; 
console.log(testOneOutput); 

Và test2.js

var testTwoOutput = 'function two'; 
console.log(testTwoOutput); 

Và tất cả các thư mục được thiết lập đúng. Mặc dù khi tôi thực hiện nhiệm vụ, tôi không có dấu hiệu cho thấy công việc làm xấu. Các nối hoạt động tuyệt vời mặc dù. Tui bỏ lỡ điều gì vậy?

Answer 1

Trong kịch bản của bạn testOneOutput và testTwoOutput là các biến toàn cầu và theo mặc định gulp-uglify chỉ mangles vars địa phương.

Đặt mã của bạn vào một hàm và bạn sẽ thấy một số cây xoài.

function go() { 
    var testOneOutput = 'function one'; 
    console.log(testOneOutput); 
} 

Answer 2

Thực hiện trước tiên uglify. Sau đó, concat các tệp đã bị làm mờ.

gulp.task('scripts', function() { 
    gulp.src('./src/scripts/*.js') 
    .pipe(uglify()) 
    .pipe(concat('main.js')) 
    .pipe(gulp.dest('./dist')); 
}); 

Answer 3

Bạn có thể cung cấp tùy chọn {mangle: {toplevel: true}} nếu bạn muốn mangle chức năng cấp cao nhất của mình.

uglify({mangle: {toplevel: true}})