Posted in Visual Studio

Web Essentials 2015

I installed Web Essentials for Visual Studio 2015 and I noticed that the SASS files didn’t compile as it did in previous versions and I noticed that some functionality has been split up into 4 seperate extensions:

  • Bundler & Minifier – for bundling and minifying JS, CSS and HTML files
  • Web Compiler – for compiling LESS, Sass, Scss, (Iced)CoffeeScript and JSX files
  • Image Optimizer – for lossless optimization of PNG, JPG and GIFs
  • Web Analyzer – for static code analysis (linting) of JS, TS, CSS and JSX files

In previous versions, Web Essentials used a WebEssentials-Settings.json file to set up all the different settings required to use these functions, but now they’re split up into their own .json settings files in the Root directory of your project and has had a few changes.

Now you have to specify input/output files in order for the compiler/minification to work, however these settings are automatically added when you try to compile/minify a file, other settings have to be added manually.

 

Here’s an example of how the compiler/bundle config could look like:

Compiler:

[
  {
    "outputFile": "Styles/master.css",
    "inputFile": "Styles/master.scss",
    "minify": {
       "enabled": true
     },
    "includeInProject": true
  }
]

Bundle:

[
  {
    "outputFile": "Scripts/main.js",
    "inputFiles": [
        "Scripts/main.js"
     ],
    "minify": {
       "enabled": true
     },
    "commentmode": "all"
  }
]

The upside to this is that you have more control over specific files and their settings, but it still executes as it did in previous Web Essential versions – when you save an edited file it automatically compiles.

You can also enable compilation on build in either the Task Runner Explorer by setting the binding or by right-clicking the configuration file and select “Enable bundle on build” / Web Compiler -> “Enable compile on build.”

Leave a Reply