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)
-
0
NM, by me adding it to the bundleconfig and right clicking minifiy it was adding it again and messing something up.
-
0
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>