terinjokes / gulp-uglify

Minify files with UglifyJS
MIT License
1.23k stars 154 forks source link

in different pc make different code #324

Closed hanxu317317 closed 6 years ago

hanxu317317 commented 6 years ago

this is code fragment in my project

function buildCompanyList() {
        var companyLi = $('.company-list__body');
        companyLi.empty();
        for(var i in companyList) {
            var d = companyList[i];
            var cUl = $('<ul></ul>')
            var cLogo = $('<img>').attr("src", "/public/img/logo.svg").addClass('company-list__logo');
            var cContent = $('<div></div>').addClass('company-list__content');
            var cBGroup = $('<div></div>').addClass('company-list__button-group');
            var cName = $('<p></p>').addClass('company-list__name').text(d.org_name);
            var cEnter = $('<p></p>').addClass('company-list__button-enter').text('进入企业');
            cBGroup.append(cEnter);
            cContent.append(cName);
            cUl.append(cLogo).append(cContent).append(cBGroup);
            companyLi.append(cUl);
            (function(d){
                cEnter.click(function(){
                    enterCompany(d)
                })
                cName.click(function(){
                    enterCompany(d)
                })
                cLogo.click(function(){
                    enterCompany(d)
                })
            })(d)
        }
    }

this is my gulp file


gulp.task('minifyJs', function() {
    return gulp.src('src/server/public/js/*')
        .pipe(uglify())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('dist'));
});

same gulp , same js, but in my pc, this is code fragment after uglify

function buildCompanyList() {
    var n = $(".company-list__body");
    n.empty();
    for (var a in companyList) {
        var p = companyList[a],
            t = $("<ul></ul>"),
            o = $("<img>")
                .attr("src", "/public/img/logo.svg")
                .addClass("company-list__logo"),
            i = $("<div></div>").addClass("company-list__content"),
            d = $("<div></div>").addClass("company-list__button-group"),
            c = $("<p></p>")
                .addClass("company-list__name")
                .text(p.org_name),
            s = $("<p></p>")
                .addClass("company-list__button-enter")
                .text("进入企业");
        d.append(s),
            i.append(c),
            t
                .append(o)
                .append(i)
                .append(d),
            n.append(t),
            (e = p),
            s.click(function() {
                enterCompany(e);
            }),
            c.click(function() {
                enterCompany(e);
            }),
            o.click(function() {
                enterCompany(e);
            });
    }
    var e;
}

but in my colleague pc

function buildCompanyList() {
        var t = $(".company-list__body");
        t.empty();
        for (var e in _) {
            var n = _[e],
                i = $("<ul></ul>"),
                a = $("<img>")
                    .attr("src", "/public/img/logo.svg")
                    .addClass("company-list__logo"),
                s = $("<div></div>").addClass("company-list__content"),
                c = $("<div></div>").addClass("company-list__button-group"),
                r = $("<p></p>")
                    .addClass("company-list__name")
                    .text(n.org_name),
                d = $("<p></p>")
                    .addClass("company-list__button-enter")
                    .text("进入企业");
            c.append(d),
                s.append(r),
                i
                    .append(a)
                    .append(s)
                    .append(c),
                t.append(i),
                (function(t) {
                    d.click(function() {
                        o(t);
                    }),
                        r.click(function() {
                            o(t);
                        }),
                        a.click(function() {
                            o(t);
                        });
                })(n);
        }
    }
hanxu317317 commented 6 years ago

the code after my uglify will make a bug .because of closure in

(function(t) {
                    d.click(function() {
                        o(t);
                    }),
                        r.click(function() {
                            o(t);
                        }),
                        a.click(function() {
                            o(t);
                        });
                })(n);
zangxd commented 6 years ago

@hanxu317317

(function(){
        "use strict";
        /* code */
    }());

    OR:

    (function(){
        "use strict";
        /* code */
    })();
kspearrin commented 6 years ago

I think I am seeing this as well. I uglify the project on my macbook and it works correctly, though when I run the same uglify task on my windows machine there are now JS errors in the project. Perhaps some downstream dependency is now breaking things? I haven't ran npm install on the macbook in a while, while this is a new dev PC on windows.

terinjokes commented 6 years ago

These sound like issues in UglifyJS, have you open an issue in their project?

hanxu317317 commented 6 years ago

I have solved this problem. in my project, this is a minified js. if i uglify this file second time , the other js will be wrong like top code. i don't know why, but it's the reason.

alexlamsl commented 6 years ago

So what happens is that you have two different versions of uglify-js on your two machines.

The buggy version is done with uglify-js@3.3.1, which is fixed in subsequent versions.