Minify CSS and JavaScript Without Webpack, Gulp, or Any Build Tool

Not every project needs webpack. Not every minification task needs a build pipeline. If you have a few JavaScript or CSS files that need to be minified, and you don't want to set up a full build environment to do it, you have fast, simple alternatives that don't require webpack, gulp, parcel, or any bundler.

This page covers browser-based and lightweight CLI options for minifying code without a build tool.

When You Don't Need a Build Tool for Minification

Build tools make sense for:

• Applications with many JS files that need bundling into one
• Projects using import/export syntax that needs tree-shaking
• Teams where automated minification on every deploy is needed

Build tools are overkill for:

• A single custom JavaScript file you want to minimize for a webpage
• A CSS file you want to compress before embedding in a page
• One-off minification of vendor scripts or legacy files
• Quick testing: "how much would this file shrink if minified?"

Option 1 — Browser-Based Minifier (Zero Install)

The fastest option with no setup:

1. Open the free code minifier
2. Select JavaScript or CSS
3. Paste your code
4. Click Minify
5. Copy or download the output

Runs in your browser — no Node.js, no npm, no terminal. Works on Mac, Windows, Linux, Chromebook, iPad. Your code never leaves your device.

Limitation: handles one file at a time. For bulk processing, use a CLI option.

Sell Custom Apparel — We Handle Printing & Free Shipping

Option 2 — npx CLI (Requires Node.js, No Global Install)

If Node.js is installed but you don't want to set up webpack:

For JavaScript:

npx terser input.js -o output.min.js -c -m

This downloads and runs Terser via npx without installing it globally. The -c flag enables compress mode, -m enables mangle (variable shortening).

For CSS:

npx csso input.css -o output.min.css

Or: npx clean-css-cli -o output.min.css input.css

For HTML:

npx html-minifier-terser input.html -o output.min.html --collapse-whitespace --remove-comments

Option 3 — npm Scripts Without a Bundler

If you want automated minification on build without webpack's overhead, add npm scripts to your package.json:

{ "scripts": { "minify:js": "terser src/app.js -o dist/app.min.js -c -m", "minify:css": "csso src/style.css -o dist/style.min.css", "build": "npm run minify:js && npm run minify:css" } }

Install: npm install --save-dev terser csso-cli

Run: npm run build

This is much lighter than webpack — no bundler, no config file, no plugins. Just two CLI tools with simple npm scripts. Perfect for small projects or static sites that don't need module bundling.

Comparing the Options at a Glance

Option	Setup time	Best for	Handles multiple files?
Browser tool	0 seconds	One-off, any device	No (one at a time)
npx CLI	30 seconds	One-off on any Node.js machine	Yes (with glob patterns)
npm scripts	5 minutes	Small projects, no bundler	Yes
webpack/Vite	30+ minutes	Full applications with modules	Yes, plus bundling

Frequently Asked Questions

Can I minify TypeScript without webpack?

Compile TypeScript to JavaScript first (tsc --outDir dist), then minify the JS output with Terser or the browser tool. TypeScript compilation (not bundling) doesn't require webpack.

Can I use esbuild without webpack?

Yes. esbuild is a standalone tool that bundles and minifies without webpack. It's much simpler to configure: esbuild app.js --bundle --minify --outfile=app.min.js. Many teams use esbuild as a lighter alternative to webpack.

Do CDN libraries need minification?

Libraries loaded from a CDN (jQuery, Bootstrap, Lodash) are already served in their .min.js versions. Only minify code you write yourself.