CODEWITHSUNDEEP
cssasp.net-mvcasp.net-corelessbundling-and-minification
Pl4tinum
Pl4tinum

Reputation: 123

How to update Site.less/site.css and bundle/minify to generate output with BuildBundlerMinifier

I have several questions on my ASP.NET MVC CORE 2.2 project. The main goal is very simple, i want to update my stylesheet and then deploy this result. I have a Site.less, site.css, site.min.css, site.min.css.gz that i want to update with a css class style, a bundleconfig.json with my input css, javascript files to be bundled and a compilerconfig.json that has Site.less as an input and site.css as output. I also have BuildBundlerMinifier installed on my project (NuGet).

Questions:

1- What file should i update when adding some new style: Site.less, site.css or both? 2- What are the steps to minify and bundle before i publish my app?

bundleconfig.json:

[
  {
    "outputFileName": "wwwroot/css/bundle.min.css",
    // An array of relative input file paths. Globbing patterns supported
    "inputFiles": [
      (...)
      "wwwroot/css/Site.min.css"
    ]
  },
  (...)
    // Optionally specify minification options
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    // Optionally generate .map file
    "sourceMap": false
  }
]

compilerconfig.json

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

When i rebuild my project in my Output window (Visual Studio 2017) i have the following messages.

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

Thank you.

Upvotes: 1

Views: 2018

Answers (1)

Pl4tinum
Pl4tinum

Reputation: 123

My first question is answered.

I have installed an extension in Visual Studio 2017 (Tools -> Extensions and Updates) named Web Compiler. When i make an update in my less file, the css file and min.css are auto generated (min.css.gz is not and don't know why). The files that the code is auto generated are water marked with Generated keyword.

To produce the auto generated files you only need to rebuild the project.

This works with other files but in my case i am only using this ones.

EDIT

My second question is also answered.

I have installed another extension: Bundler & Minifier

To produce bundle you need to have those config json files i have posted in my first post and then open Task Runner Explorer and double click on wwwroot/css/bundle.min.css (inside StyleSheets menu) and the bundle file will be auto generated.

Upvotes: 0

Related Questions