Minify CSS with Azure Devops Pipeline: A Step-by-Step Guide

Published on Mar 30, 2023

In the old days, I would use Visual Studio extensions to minify CSS files. However this approach became difficult to manage once the team expanded to include developers on macOS and Linux.

Linux developers are not using Visual Studio, which means that they couldn’t use the same tool as me to minify files.

The idea of managing two different systems for minifying files didn’t sit right with me.

We couldn’t force every developer to use the same OS, therefore the only logical approach was to minify the files from our CI/CD pipeline.

This article is going to describe the approach that my team used to minify css files in an Azure Devops Pipeline.

NPM dev packages in your project

In your project’s root directory, create a package.json file if it doesn’t exist already. Add the following dependencies:

{
  "devDependencies": {
    "clean-css": "^5.3.0",
    "glob": "^7.1.7"
  }
}

Run npm install in your project’s root directory to install the dependencies.

Local script

Create a JavaScript file called minify-css.js in your project’s root directory with the following content:

const CleanCSS = require('clean-css');
const fs = require('fs');
const glob = require('glob');

const inputPath = process.argv[2] || 'src/**/*.css';
const outputPath = process.argv[3] || 'dist/';

glob(inputPath, (err, files) => {
  if (err) throw err;

  files.forEach(file => {
    fs.readFile(file, 'utf8', (err, css) => {
      if (err) throw err;

      const output = new CleanCSS().minify(css).styles;
      const outputFile = outputPath + file.split('/').pop().replace('.css', '.min.css');

      fs.writeFile(outputFile, output, err => {
        if (err) throw err;
        console.log(`Minified ${file} -> ${outputFile}`);
      });
    });
  });
});

Be sure to adjust the file paths where appropriate.

Install Node.js in your pipeline

We’re now going to make the changes to our Devops Pipeline.

Add the following task to your pipeline YAML file:

- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

Finish up the pipeline

Add the following tasks to your pipeline YAML file to install dependencies and minify the CSS files:

- script: |
    npm ci
  displayName: 'Install Node.js dependencies'

- script: |
    node minify-css.js 'path/to/your/css/files/**/*.css' 'path/to/output/directory/'
  displayName: 'Minify CSS files'

Replace the paths in the node minify-css.js command with the appropriate paths for your project

Save and run your pipeline. The CSS files should now be minified during the pipeline execution.

---

Article Categories: # css # azure-devops-pipeline

Date Published: Mar 30, 2023