uglify-js-minify-css-allfiles

A powerful tool to minify and obfuscate JavaScript and CSS files in your project.
It helps protect your code in deployment environments and makes it less recognizable to others, all through a simple CLI interface.
You can easily minify all files in a specific folder, with the option to exclude certain directories.

Table of Contents

• Installation
• Features
• Usage
• Advanced Features
  • Babel Integration
  • PostCSS Processing
  • Image Versioning
  • Logging System
  • Source Maps
• API Reference
• Contributing
• License

Features

• 🚀 JavaScript and CSS minification with advanced options
• 📦 Babel transformation support for modern JavaScript
• 🎨 PostCSS processing for modern CSS features
• 🖼️ Automatic image versioning and cache busting
• 📝 Comprehensive logging system
• 🛡️ Configurable file exclusion
• 🔄 ES module support
• 📊 Processing statistics and summaries
• 🔍 Source map generation for easier debugging

Installation

Install with npm:

$ npm i uglify-js-minify-css-allfiles

Usage

Basic Usage

import minifyAll from 'uglify-js-minify-css-allfiles';

await minifyAll('./src/');

Advanced Usage

import minifyAll from 'uglify-js-minify-css-allfiles';
import postcssImport from 'postcss-import';
import postcssMixins from 'postcss-mixins';

await minifyAll('./src/', {
  excludeFolder: 'node_modules',
  useBabel: {
    targets: 'chrome 40',
    modules: false,
    useBuiltIns: 'usage',
    corejs: 3,
    useAppendTransform: true,
    plugins: ['@babel/plugin-proposal-class-properties'],
  },
  usePostCSS: {
    browsers: ['Chrome >= 40'],
    stage: 2,
    features: {
      'nesting-rules': true,
      'custom-properties': true,
      'color-functional-notation': true,
    },
    autoprefixer: {
      grid: true,
    },
    plugins: [
      postcssImport(),
      postcssMixins(),
    ],
  },
  useLog: {
    logDir: 'logs',
    retentionDays: 30,
    logLevel: 'info',
    dateFormat: 'YYYY-MM-DD',
    timeZone: 'UTC',
    logToConsole: true,
    logToFile: true,
  },
  jsMinifyOptions: {
    compress: {
      dead_code: true,
      drop_debugger: true,
      pure_funcs: ['console.log'],
      conditionals: true,
      evaluate: true,
      unused: true,
    },
    mangle: true,
  },
  cssMinifyOptions: {
    level: 2,
  },
  useVersioning: {
    extensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],
  },
  useJsMap: true,
  useCssMap: true
});

Advanced Features

Babel Integration

Built-in Babel support for modern JavaScript transpilation:

• Configurable target environments
• Module transformation options
• Built-ins and CoreJS integration
• Customizable plugin/preset options

await minifyAll('./src/', {
  useBabel: {
    targets: 'chrome 40',
    modules: false,
    useBuiltIns: 'usage',
    corejs: 3,
  },
});

PostCSS Processing

Process modern CSS features with PostCSS integration:

• Process CSS with modern features like nesting rules, custom properties, and color functions
• Automatically transpile modern CSS to be compatible with older browsers
• Support for customizable browser targets
• Integrated with the CSS minification pipeline
• Extensible with any PostCSS plugin

await minifyAll('./src/', {
  usePostCSS: {
    browsers: ['Chrome >= 40'],
    stage: 2,
    features: {
      'nesting-rules': true, // Enable CSS nesting
      'custom-properties': true, // Enable CSS variables
      'color-functional-notation': true, // Enable modern color syntax
    },
    autoprefixer: {
      grid: true, // Enable grid features with autoprefixer
    },
  },
});

PostCSS Custom Plugins

You can extend the PostCSS pipeline with any additional plugins via the plugins option. Custom plugins are appended after postcss-preset-env, so they receive the already-transformed CSS.

import postcssImport from 'postcss-import';
import postcssMixins from 'postcss-mixins';
import postcssCustomMedia from 'postcss-custom-media';

await minifyAll('./src/', {
  usePostCSS: {
    browsers: ['Chrome >= 40'],
    stage: 2,
    plugins: [
      postcssImport(),        // Resolve @import rules
      postcssMixins(),        // Enable CSS mixins
      postcssCustomMedia(),   // Enable @custom-media queries
    ],
  },
});

Note: Each plugin must be a PostCSS-compatible plugin instance or factory function. Install any extra plugins separately (e.g. npm i postcss-import).

CSS Example with PostCSS Features

/* CSS Variables */
:root {
  --primary-color: #3f51b5;
  --secondary-color: #f50057;
}

/* Nesting Rules */
.card {
  background-color: white;

  & .card-header {
    color: var(--primary-color);

    &:hover {
      color: var(--secondary-color);
    }
  }
}

/* Modern Color Syntax */
.color-examples {
  color: rgb(0 0 0 / 0.8); /* Modern RGB syntax with alpha */
  border-color: color-mix(in srgb, var(--primary-color) 70%, black 30%);
}

Image Versioning

Automatic versioning for image references in JS and CSS files:

• Content-based hashing for images in CSS files
• Random hash generation for JS image references
• Support for multiple image formats (PNG, JPEG, GIF, SVG, WebP, etc.)
• Handles various image path formats:
  • Complex CSS background declarations
  • image-set() syntax support

await minifyAll('./src/', {
  useVersioning: {
    extensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],
  },
});

Logging System

Comprehensive logging capabilities:

• Multiple log levels (error, warn, info, debug)
• File rotation with retention policies
• Customizable date formats and timezones
• Console and file output options
• Processing statistics and summaries

await minifyAll('./src/', {
  useLog: {
    logDir: 'logs',
    retentionDays: 30,
    logLevel: 'info',
    dateFormat: 'YYYY-MM-DD',
    timeZone: 'UTC',
    logToConsole: true,
    logToFile: true,
  },
});

Source Maps

Generate source maps for both JavaScript and CSS files to aid in debugging minified code:

• Maps compressed code back to original source code
• Automatically creates .map files alongside minified files
• Seamless integration with browser developer tools
• Works with or without Babel/PostCSS transformation
• Helps maintain debuggability in production environments

await minifyAll('./src/', {
  useJsMap: true,
  useCssMap: true
});

API Reference

minifyAll(contentPath, options)

Main function to process files.

• contentPath (string): Source directory path
• options (object): Configuration options
  • excludeFolder (string): Directory to exclude
  • useBabel (boolean|object): Babel configuration
  • usePostCSS (boolean|object): PostCSS configuration
    • plugins (Array): Additional PostCSS plugins (appended after postcss-preset-env)
  • useLog (boolean|object): Logging configuration
  • jsMinifyOptions (object): JavaScript minification options
  • cssMinifyOptions (object): CSS minification options
  • useVersioning (object): Image versioning configuration
    • extensions (string[]): List of image extensions to version
  • useJsMap (boolean): Enable source map generation for JavaScript files
  • useCssMap (boolean): Enable source map generation for CSS files

Babel Options

The useBabel object supports all @babel/preset-env options:

{
  targets: string | string[] | Object,
  modules: 'amd' | 'umd' | 'systemjs' | 'commonjs' | false,
  debug: boolean,
  include: string[],
  exclude: string[],
  useBuiltIns: 'usage' | 'entry' | false,
  corejs: 2 | 3 | { version: 2 | 3, proposals: boolean },
  forceAllTransforms: boolean,
  configPath: string,
  ignoreBrowserslistConfig: boolean,
  shippedProposals: boolean,
  useAppendTransform: boolean,
  plugins: Array<string|any[]|Function>
}

PostCSS Options

The usePostCSS object supports the following options:

{
  browsers: string[] | Object,  // Browser targets
  stage: 0 | 1 | 2 | 3 | 4 | 5,  // CSS feature stage level
  features: {
    'nesting-rules': boolean,  // CSS nesting rules
    'custom-properties': boolean,  // CSS variables
    'color-functional-notation': boolean,  // Modern color syntax
    // Other CSS features...
  },
  autoprefixer: {
    grid: boolean | 'autoplace' | 'no-autoplace'
    // Other autoprefixer options...
  },
  plugins: Array<PostCSSPlugin>  // Additional PostCSS plugins (appended after postcss-preset-env)
}

Option	Type	Default	Description
browsers	string[] | Object	['Chrome >= 40']	Browser targets passed to postcss-preset-env
stage	0–5	2	CSS feature stage level
features	Object	see defaults	Granular feature toggles
autoprefixer	Object	{ grid: true }	Autoprefixer options
plugins	Array	[]	Additional PostCSS plugins, appended after postcss-preset-env

JavaScript Minification Options

Supports all UglifyJS options:

{
  compress: {
    dead_code: boolean,
    drop_debugger: boolean,
    pure_funcs: string[],
    conditionals: boolean,
    evaluate: boolean,
    booleans: boolean,
    loops: boolean,
    unused: boolean,
    if_return: boolean,
    join_vars: boolean,
    cascade: boolean,
    side_effects: boolean
  },
  mangle: boolean | Object,
  output: {
    beautify: boolean,
    comments: boolean | 'all' | 'some' | RegExp
  }
}

CSS Minification Options

Supports Clean-CSS options:

{
  level: 0 | 1 | 2 | {
    1: {
      all: boolean,
      specialComments: boolean | string
    },
    2: {
      mergeSemantically: boolean,
      restructureRules: boolean
    }
  },
  compatibility: string | string[],
  format: string | Object
}

Contributing

Your help is appreciated! Create a PR or just buy me a coffee

License

MIT. See LICENSE.md for details.