or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

grunt-contrib-cssmin

grunt-contrib-cssmin is a Grunt plugin that provides CSS minification capabilities using the clean-css library. It registers a multi-task for minifying CSS files in Grunt build processes, with support for source maps, file concatenation, and detailed compression reporting.

Package Information

Package Name: grunt-contrib-cssmin
Package Type: npm
Language: JavaScript (Node.js)
Installation: npm install grunt-contrib-cssmin --save-dev

Core Imports

// Load as Grunt plugin
grunt.loadNpmTasks('grunt-contrib-cssmin');

// Or load tasks manually
require('grunt-contrib-cssmin')(grunt);

Basic Usage

// In Gruntfile.js
grunt.initConfig({
  cssmin: {
    options: {
      sourceMap: true,
      report: 'min'
    },
    target: {
      files: {
        'dist/output.min.css': ['src/input1.css', 'src/input2.css']
      }
    }
  }
});

// Register and run the task
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['cssmin']);

Capabilities

Main Plugin Registration

The plugin exports a function that registers the cssmin task with Grunt.

/**
 * Main plugin registration function
 * @param grunt - Grunt instance
 */
function cssminPlugin(grunt: GruntInstance): void;

Task Registration

The plugin registers a multi-task named 'cssmin' that can be configured with multiple targets.

/**
 * Grunt multi-task registration for CSS minification
 * Task name: 'cssmin'
 * Description: 'Minify CSS'
 * @param taskName - The task name ('cssmin')
 * @param description - Task description ('Minify CSS')
 * @param taskFunction - Task implementation function
 */
grunt.registerMultiTask(taskName: string, description: string, taskFunction: function): void;

Task Options

The cssmin task accepts configuration options that control minification behavior.

interface CssminOptions {
  /** Report compression results: 'min' for basic stats, 'gzip' for gzip comparison */
  report?: 'min' | 'gzip';
  
  /** Enable source map generation */
  sourceMap?: boolean;
  
  /** Enable URL rebasing relative to destination directory */
  rebase?: boolean;
  
  /** Enable debug output showing detailed clean-css statistics */
  debug?: boolean;
  
  // All clean-css options are supported
  /** Merge properties into shorthand equivalents */
  mergeIntoShorthands?: boolean;
  
  /** Precision for rounding pixel values (-1 disables rounding) */
  roundingPrecision?: number;
  
  /** Control special comment preservation */
  keepSpecialComments?: '*' | '1' | '0' | 1 | 0;
  
  /** Path to rebase relative URLs against (auto-set when rebase: true) */
  rebaseTo?: string;
  
  /** Control @import inlining */
  inline?: string[] | boolean;
  
  /** Advanced clean-css optimization level */
  level?: 0 | 1 | 2;
}

File Configuration

Standard Grunt file configuration patterns are supported for flexible input/output mapping.

interface FileConfiguration {
  /** Static file mapping: destination -> source array */
  files?: { [dest: string]: string[] };
  
  /** Dynamic file mapping with glob patterns */
  files?: Array<{
    /** Enable dynamic file expansion */
    expand: boolean;
    /** Source directory for glob patterns */
    cwd: string;
    /** Source file patterns */
    src: string[];
    /** Destination directory */
    dest: string;
    /** File extension for output files */
    ext?: string;
  }>;
}

Error Handling

The task provides comprehensive error handling and logging.

interface MinificationResult {
  /** CSS output string */
  styles: string;
  
  /** Source map if enabled */
  sourceMap?: SourceMap;
  
  /** Array of error messages */
  errors: string[];
  
  /** Array of warning messages */  
  warnings: string[];
  
  /** Minification statistics */
  stats: {
    efficiency: number;
    minifiedSize: number;
    originalSize: number;
    timeSpent: number;
  };
}

Usage Examples

Basic File Minification

cssmin: {
  target: {
    files: {
      'dest/output.min.css': ['src/input.css']
    }
  }
}

Multiple File Concatenation and Minification

cssmin: {
  combine: {
    files: {
      'dist/styles.min.css': [
        'src/reset.css',
        'src/base.css',
        'src/components.css'
      ]
    }
  }
}

Bulk Processing with Glob Patterns

cssmin: {
  minify: {
    files: [{
      expand: true,
      cwd: 'src/css',
      src: ['*.css', '!*.min.css'],
      dest: 'dist/css',
      ext: '.min.css'
    }]
  }
}

Advanced Options with Source Maps

cssmin: {
  options: {
    sourceMap: true,
    report: 'gzip',  
    mergeIntoShorthands: false,
    roundingPrecision: -1,
    keepSpecialComments: '*',
    rebase: true
  },
  production: {
    files: {
      'dist/app.min.css': ['src/**/*.css']
    }
  }
}

Clean-CSS Level 2 Optimizations

cssmin: {
  options: {
    level: 2,
    inline: ['remote'],
    keepSpecialComments: 0
  },
  advanced: {
    files: {
      'build/optimized.css': ['src/styles.css']
    }
  }
}

Task Execution Results

The task provides detailed feedback about the minification process including file creation statistics and compression ratios using the maxmin library for size comparison reporting.