Question

这根本不是优先事项，但这一直困扰着我。我讨厌在这里发帖，因为我完全困惑，但也许其他人会理解它。

在我进入高谈阔论之前需要注意的一些事项：

这是来自Udemy课程，而不是我的项目。
我对Gulp充其量了解。
我知道基本的javascript，但对ES6功能并不是很了解。
对于这个Udemy课程，使用了Babel，因此对于目前不支持ES6的浏览器，ES6输出到ES5。
对于这个Udemy课程，主要使用JQuery，并将Javascript文件分解成块。然后将每个块导入到主JS文件中。有点制作SCSS部分，将它们导入主SCSS文件，然后CSS文件显示所有代码

我希望这一切都清楚。

我已经在javascript中发现了导致问题的4个代码区域，这使得我的javascript代码无法使用gulp-uglify任务缩小。我认为ES6 ......这个词？（不知道该怎么称呼它）......“类”引起了这个问题。这些都是构造函数。

如果我摆脱了那4个Constructor函数，我就可以毫无问题地gulp-uglify文件......但当然我需要那些代码。

我只会显示“实时”文件中的代码，因为我很可能会改变它以使gulp-uglify工作

我希望这不会引起混淆，因为即使输入这个内容我也很困惑。

class MobileMenu {
constructor() {
    this.siteHeader = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".site-header");
    this.menuIcon = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".site-header__menu-icon");
    this.menuContent = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".site-header__menu-content");
    this.events();
}

events() {
    this.menuIcon.click(this.toggleTheMenu.bind(this));
}

toggleTheMenu() {
    this.menuContent.toggleClass("site-header__menu-content--is-visible");
    this.siteHeader.toggleClass("site-header--is-expanded");
    this.menuIcon.toggleClass("site-header__menu-icon--close-x");
}

}

class RevealOnScroll {
constructor(els, offset) {
    this.itemsToReveal = els;
    this.offsetPercentage = offset;
    this.hideInitally();
    this.createWaypoints();
}

hideInitally() {
    this.itemsToReveal.addClass("reveal-item");
}

createWaypoints() {
    var that = this;
    this.itemsToReveal.each(function() {
        var currentItem = this;
        new Waypoint({
            element: currentItem,
            handler: function() {
                __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(currentItem).addClass("reveal-item--is-visible");
            },
            offset: that.offsetPercentage
        });
    });
}

}

class StickyHeader {
constructor() {
    this.lazyImages = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".lazyload");
    this.siteHeader = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".site-header");
    this.headerTriggerElement = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".large-hero__title");
    this.createHeaderWaypoint();
    this.pageSections = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".page-section");
    this.headerLinks = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".primary-nav a");
    this.createPageSectionWaypoints();
    this.addSmoothScrolling();
    this.refreshWaypoints();
}

refreshWaypoints() {
    this.lazyImages.load(function() {
        Waypoint.refreshAll();
    });
}

addSmoothScrolling() {
    this.headerLinks.smoothScroll();
}

createHeaderWaypoint() {
    var that = this;
    new Waypoint({
        element: this.headerTriggerElement[0],
        handler: function(direction) {
            if (direction === "down"){
                that.siteHeader.addClass("site-header--dark");
            }
            else {
                that.siteHeader.removeClass("site-header--dark");
            }
        }
    });
}

createPageSectionWaypoints() {
    var that = this;
    this.pageSections.each(function() {
        var currentPageSection = this;
        new Waypoint({
            element: currentPageSection,
            handler: function(direction) {
                if (direction === "down") {
                    var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
                    that.headerLinks.removeClass("is-current-link")
                    __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(matchingHeaderLink).addClass("is-current-link");
                }
            },
            offset: "18%"
        });
        new Waypoint({
            element: currentPageSection,
            handler: function(direction) {
                if (direction === "up") {
                    var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
                    that.headerLinks.removeClass("is-current-link")
                    __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(matchingHeaderLink).addClass("is-current-link");
                }
            },
            offset: "-40%"
        });
    });
}

}

class Modal {
constructor() {
    this.openModalButton = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".open-modal");
    this.modal = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".modal");
    this.closeModalButton = __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(".modal__close");
    this.events();
}

events() {
    //clicking the open modal button 
    this.openModalButton.click(this.openModal.bind(this));

    //clicking the X close modal button
    this.closeModalButton.click(this.closeModal.bind(this));

    //pushes any key
    __WEBPACK_IMPORTED_MODULE_0_jquery___default.a(document).keyup(this.keyPressHandler.bind(this));
}

keyPressHandler(e) {
    if (e.keyCode === 27) {
        this.closeModal();
    }
}

openModal() {
    this.modal.addClass("modal--is-visible");
    return false;
}

closeModal() {
    this.modal.removeClass("modal--is-visible");
}

}

Answer 1

您应该在gulp-babel

之前运行gulp-uglify

gulp-babel

有babili，最好检查一下

Answer 2

你需要在两者之间运行一个蒸腾步骤。 Gulp uglify无法处理新的Javascript格式，您需要一个像https://www.npmjs.com/package/gulp-babel这样的插件来确保所有内容都采用通用的es2015格式。

const babel = require('gulp-babel');

gulp.task('default', () => {
return gulp.src('src/app.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'));
});

知道为什么gulp-uglify不会最小化我的ES6 javascript吗？

2 个答案: