Building and bundling with BuildBundlerMinifier: a step-by-step guide on updating Site.less/site.css and minimizing the output

Having multiple inquiries regarding my ASP.NET MVC CORE 2.2 project. The primary objective is quite straightforward - updating the stylesheet and deploying the changes. I am in possession of Site.less, site.css, site.min.css, site.min.css.gz files that need to be updated with a new css class style. Additionally, there's a bundleconfig.json containing input css and javascript files for bundling, as well as a compilerconfig.json specifying Site.less as input and site.css as output. BuildBundlerMinifier package has also been installed via NuGet.

Queries:

1- When adding a new style, should I update Site.less, site.css or both? 2- What are the steps involved in minifying and bundling before publishing my app?

bundleconfig.json:

[
  {
    "outputFileName": "wwwroot/css/bundle.min.css",
    // Array of relative input file paths supporting globbing patterns
    "inputFiles": [
      (...)
      "wwwroot/css/Site.min.css"
    ]
  },
(...)
    // Minification options can be specified
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Option to generate .map file
    "sourceMap": false
  }
]

compilerconfig.json

[
  {
    "inputFile": "wwwroot/css/Site.less",
    "outputFile": "wwwroot/css/site.css"
  }
]

Upon rebuilding the project, these messages appear in the Output window of Visual Studio 2017:

Cleaning output from bundleconfig.json, Done cleaning output file from bundleconfig.json, Begin processing bundleconfig.json, Minified wwwroot/css/bundle.min.css, Done processing bundleconfig.json

Your assistance in this matter is much appreciated.

Answer №1

One of my queries has been resolved.

In Visual Studio 2017, I added an extension called Web Compiler through Tools -> Extensions and Updates. Whenever I update my less file, the css file and min.css files are automatically generated (though it seems min.css.gz is not being created for some reason). The auto-generated files have a watermark indicating they were generated by code.

To generate these files automatically, simply rebuild the project.

This process works with other files as well, but in my case, I am only using these particular ones.

UPDATE

Another question I had is now answered too.

I also installed another extension: Bundler & Minifier.

To create bundles, you'll need the configuration JSON files mentioned in my previous post. Then, open Task Runner Explorer, double click on wwwroot/css/bundle.min.css (under StyleSheets menu) and the bundle file will be automatically generated.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mirror image navigation bar on both sides

Currently, I am attempting to create a navbar with images. The goal is to have the navbar centered in the middle with the image repeated on both sides. However, I am running into an issue where the picture is only repeating on the right side. Does anyone h ...

Uncovering intricate CSS selector techniques

I need help with filling text in a Selenium Firefox browser. I am struggling to find the selector for entering text and it seems very complex for me. Please explain the only way I can achieve this using only CSS selectors. <div class="Gb WK"> < ...

Unseen components and columns with Bootstrap 4

I am attempting to hide a checkbox input in the middle of some column elements using Bootstrap 4. <div class="container"> <div class="row"> <a class="col-2"> 1 of 2 </a> <input type="checkbox" class="invisibl ...

jQuery UI dynamically adjusting content layout based on browser size changes

Having an issue with my custom accordion script where resizing the browser causes formatting problems in one of the sections. I want the content to remain intact and to utilize a scrollbar if necessary to view the content. The problem is visible in section ...

The mobile menu is not responding to the click event

Upon clicking the mobile menu hamburger button, I am experiencing a lack of response. I expected the hamburger menu to transition and display the mobile menu, but it seems that neither action is being triggered. Even though I can confirm that my javascrip ...

Distinguishing between a video or image when uploading files in JavaScript

I've been researching whether JavaScript can determine if a file is a video or an image. However, most of the information I found only shows how to accept these types using the input tag. What I really need is for JS to identify the file type and the ...

What is the best way to arrange card-columns in a horizontal order?

My smart-scrolling list of cards uses the card-columns style, but I find it frustrating that they are ordered top to bottom like this: 1 4 7 2 5 8 3 6 9 This vertical ordering becomes impractical when dealing with a large number of items. When I have 50 ...

An italicized Arial font appears especially bold

When using Arial italic on a website, I followed these steps: font-family: Arial; font-style:italic; font-weight:100; In Photoshop, the Arial italic font appears as thin as the regular version. However, on the website, it looks bold instead. I'm uns ...

prevent parent jQuery functions from interfering with child function execution

I am facing an issue with conflicting jQuery functions between parent and child elements. The child function is a bootstrap function, while the parent is a custom function. The main objective is to limit the height of the parent div (refer to the code belo ...

Enhance the appearance of your forms with the "Bootstrap

I'm having trouble with the input-group-addon class. My HTML code is dynamically generated using JavaScript and follows the same structure across different pages. However, it works on one page but not on another. I can't seem to figure out why! ...

Is it possible to customize the appearance of the Facebook and Twitter sharing buttons?

Whenever I try to use the Twitter and Facebook share functionality, I am presented with the standard default share buttons that resemble: https://i.sstatic.net/W5ZN8.png https://i.sstatic.net/0MW3U.png I have reviewed the policies, which indicate: Do not ...

Is there a way to ensure that neighboring divs have the same height as the tallest div in a row?

In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This probl ...

Issues with Mouse Hover/Image Replacement

In this particular example, I am attempting to achieve a simple functionality where an image changes when the mouse hovers over it, and reverts back to the original image when the mouse is no longer hovering. However, despite my efforts, there seems to be ...

A line that shines brightest in its center, dimming slightly towards both ends

Recently, I stumbled upon some 80's retro design elements that featured glowing effects, such as this one: https://i.sstatic.net/aaJPR.png Would it be possible to recreate this glowing effect using just CSS? I'm thinking of creating a line with ...

The HTML checkbox appears disproportionately large on the user's screen when using Firefox and Chrome, but not when using Internet Explorer

There seems to be a strange issue that I've come across. One of our QA tester's computers is displaying an HTML checkbox in a very large size when using Firefox and Chrome, but it appears normal in size when viewed in IE. Meanwhile, on my comput ...

Is there a way to align the choices in a MUI autocomplete to the center and surround them with a border?

I've been struggling to center the options in a MUI autocomplete and wrap each option in a border. I've tried multiple methods without success, including adding it to inputProps and using a style paper component. const PlacementCell = ({ value, p ...

I am experiencing an issue where the Flex table is not displaying more than 50 rows

I am experiencing an issue where I can't scroll back up with the scrollbar. The table is dynamically filled with data from a database, and when it gets too long, I am unable to scroll back up. Any suggestions on how to solve this problem? If you need ...

What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it. Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I' ...

Ways to create a blurred effect on a button that is in a disabled state

Can a button be blurred when it is disabled? Are there any methods to achieve this effect? <button (click)="addRow()" class="add-row-btn" mat-button [disabled]="isDisabled"> Add Row</button> ...

What is the best way to create more space between written text and the line beneath it?

Here's how my bootstrap navbar appears: https://i.sstatic.net/ZPe9c.png As I hover over each menu option, there is an animated underline that displays like so: https://i.sstatic.net/JWKWy.png Is there a way to widen the space between the text and it ...