you will be able to minify all files as same file names which is js or css
npm install uglify-js-minify-css-allfilesnpm:
bash
$ npm i uglify-js-minify-css-allfiles
`
Usage
$3
`js
import minifyAll from 'uglify-js-minify-css-allfiles';
await minifyAll('./src/');
`
$3
`js
import minifyAll from 'uglify-js-minify-css-allfiles';
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,
},
},
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
$3
Built-in Babel support for modern JavaScript transpilation:
- Configurable target environments
- Module transformation options
- Built-ins and CoreJS integration
- Customizable plugin/preset options
`js
await minifyAll('./src/', {
useBabel: {
targets: 'chrome 40',
modules: false,
useBuiltIns: 'usage',
corejs: 3,
},
});
`
$3
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
`js
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
},
},
});
`
$3
`css
/ 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%);
}
`
$3
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
`js
await minifyAll('./src/', {
useVersioning: {
extensions: ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],
},
});
`
$3
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
`js
await minifyAll('./src/', {
useLog: {
logDir: 'logs',
retentionDays: 30,
logLevel: 'info',
dateFormat: 'YYYY-MM-DD',
timeZone: 'UTC',
logToConsole: true,
logToFile: true,
},
});
`
$3
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
`js
await minifyAll('./src/', {
useJsMap: true,
useCssMap: true
});
API Reference
$3
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
- 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
$3
The useBabel object supports all @babel/preset-env options:
`js
{
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
}
`
$3
The usePostCSS object supports the following options:
`js
{
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 // Additional PostCSS plugins
}
`
$3
Supports all UglifyJS options:
`js
{
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
}
}
`
$3
Supports Clean-CSS options:
`js
{
level: 0 | 1 | 2 | {
1: {
all: boolean,
specialComments: boolean | string
},
2: {
mergeSemantically: boolean,
restructureRules: boolean
}
},
compatibility: string | string[],
format: string | Object
}
``