CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-grunt-contrib-cssmin

Grunt plugin for CSS minification using clean-css library

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/grunt-contrib-cssmin@5.0.x
Publish Source
CLI
Badge
tessl/npm-grunt-contrib-cssmin badge