Base solution for your next web application
Open Closed

Core JS Bundle/Minification Process? #3668


User avatar
0
bbakermmc created

What is the preferred way to do bundling/minification of JS files.

I'm trying to follow your structure for the .js files but you guide doesn't say what to do.

I take this .js file and right click on it to bundle/minify and doesn't minify it.

var _userService = abp.services.app.user;

        var _permissions = {
            create: abp.auth.hasPermission("Administration.Users.Create"),
            edit: abp.auth.hasPermission("Administration.Users.Edit"),
            changePermissions: abp.auth.hasPermission("Administration.Users.ChangePermissions"),
            impersonation: abp.auth.hasPermission("Administration.Users.Impersonation"),
            'delete': abp.auth.hasPermission("Administration.Users.Delete")
        };

        var _createOrEditModal = new app.ModalManager({
            viewUrl: abp.appPath + "App/Users/CreateOrEditModal",
            scriptUrl: abp.appPath + "view-resources/Areas/App/Views/Users/_CreateOrEditModal.js",
            modalClass: "CreateOrEditUserModal"
        });

        var _userPermissionsModal = new app.ModalManager({
            viewUrl: abp.appPath + "App/Users/PermissionsModal",
            scriptUrl: abp.appPath + "view-resources/Areas/App/Views/Users/_PermissionsModal.js",
            modalClass: "UserPermissionsModal"
        });

        function permissions(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            _userPermissionsModal.open({ id: dataItem.Id });
        }

        function remove(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            deleteUser(dataItem);
        }

        function signIn(e) {
            abp.ui.setBusy();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            abp.ajax({
                url: abp.appPath + "Account/Impersonate",
                data: JSON.stringify({
                    tenantId: abp.session.tenantId,
                    userId: dataItem.Id
                })
            }).fail(function () {
                abp.ui.clearBusy();
            });
        }

        function edit(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            _createOrEditModal.open({ id: dataItem.Id });
        }

        function unlock(e) {
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

            _userService.unlockUser({
                id: dataItem.id
            }).done(function () {
                abp.notify.success(app.localize("UnlockedTheUser", dataItem.UserName));
            });
        }

        function dataBound(e) {
            var unlockSpan = "<span class='fa fa-unlock'></span>";
            e.sender.tbody.find(".k-grid-Unlock").prepend(unlockSpan);

            if (!_permissions.changePermissions) {
                e.sender.tbody.find(".k-grid-Unlock").remove();
            }

            var permissionSpan = "<span class='fa fa-key'></span>";
            e.sender.tbody.find(".k-grid-Permissions").prepend(permissionSpan);

            if (!_permissions.changePermissions) {
                e.sender.tbody.find(".k-grid-Permissions").remove();
            }

            var editSpan = "<span class='fa fa-edit'></span>";
            e.sender.tbody.find(".k-grid-Edit").prepend(editSpan);

            if (!_permissions.edit) {
                e.sender.tbody.find(".k-grid-Edit").remove();
            }

            var deleteSpan = "<span class='fa fa-remove'></span>";
            e.sender.tbody.find(".k-grid-Delete").prepend(deleteSpan);

            if (!_permissions["delete"]) {
                e.sender.tbody.find(".k-grid-Delete").remove();
            }

            var signInSpan = "<span class='fa fa-sign-in'></span>";
            e.sender.tbody.find(".k-grid-SignIn").prepend(signInSpan);

            if (!_permissions.impersonation) {
                e.sender.tbody.find(".k-grid-SignIn").remove();
            }

            var grid = $("#grid").data("kendoGrid");
            var gridData = grid.dataSource.view();

            for (var i = 0; i < gridData.length; i++) {
                if (_permissions.impersonation && gridData[i].Id === abp.session.userId) {
                    var tr = grid.table.find("tr[data-uid='" + gridData[i].uid + "']");
                    tr.find(".k-grid-SignIn").remove();
                }
            }
        }

        function deleteUser(user) {
            if (user.UserName === app.consts.userManagement.defaultAdminUserName) {
                abp.message.warn(app.localize("{0}UserCannotBeDeleted", app.consts.userManagement.defaultAdminUserName));
                return;
            }

            abp.message.confirm(app.localize("UserDeleteWarningMessage", user.UserName), function (isConfirmed) {
                if (isConfirmed) {
                    _userService.deleteUser({
                        id: user.Id
                    }).done(function () {
                        abp.notify.success(app.localize("SuccessfullyDeleted"));
                    });
                }
            });
        }

        function getRoleNames(roles) {
            var roleNames = "";
            for (var j = 0; j < roles.length; j++) {
                if (roleNames.length) {
                    roleNames = roleNames + ", ";
                }

                roleNames = roleNames + roles[j].roleName;
            };

            return roleNames;
        }

        function PermissionSelectionComboOnChange() {
            $("#grid").data("kendoGrid").dataSource.read();
        }

        function getAdvancedParameters() {
            var grid = $("#grid").data("kendoGrid");
            var currentPageSize = grid.dataSource.pageSize();
            var currentPage = grid.dataSource.page();

            var skipCount = 0;
            if (currentPage > 1) {
                skipCount = currentPageSize * currentPage - 1;
            }
            return {
                permission: $("#PermissionSelectionCombo").val(),
                role: $("#RoleSelectionCombo").val(),
                MaxResultCount: currentPageSize,
                SkipCount: skipCount
            };
        }

        function RoleSelectionComboboxOnChange() {
            $("#grid").data("kendoGrid").dataSource.read();
        }

        $("#grid").on("click", ".k-grid-createBtn", function () {
            _createOrEditModal.open();
        });

        $("#ShowAdvancedFiltersSpan").click(function () {
            $("#ShowAdvancedFiltersSpan").hide();
            $("#HideAdvancedFiltersSpan").show();
            $("#AdvacedAuditFiltersArea").slideDown();
        });

        $("#HideAdvancedFiltersSpan").click(function () {
            $("#HideAdvancedFiltersSpan").hide();
            $("#ShowAdvancedFiltersSpan").show();
            $("#AdvacedAuditFiltersArea").slideUp();
        });

But if I compile it, it then makes a .es5.js file and a .es5.min.js file then in my bundleconfig I can min the .es5.js file and it works fine. But if I don't compile it doesn't pick up changes.

{
        "outputFileName": "wwwroot/view-resources/Areas/App/Views/Users/indexTelerik.min.js",
        "inputFiles": [
            "wwwroot/view-resources/Areas/App/Views/Users/indexTelerik.es5.js"
        ]
    },

2 Answer(s)
  • User Avatar
    0
    bbakermmc created

    NM, by me adding it to the bundleconfig and right clicking minifiy it was adding it again and messing something up.

  • User Avatar
    0
    alper created
    Support Team

    hi

    there's a plugin called WebEssentials for Visual Studio. If you install that plugin you'll have bundler & minifier tool.

    <a class="postlink" href="https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebExtensionPack2017">https://marketplace.visualstudio.com/it ... onPack2017</a>