Node js css minify

/*

SVG tags are automatically recognized, and when they are minified, both case-sensitivity and closing-slashes are preserved, regardless of the minification settings used for the rest of the file.

Working with invalid markup

HTMLMinifier can’t work with invalid or partial chunks of markup. This is because it parses markup into a tree structure, then modifies it (removing anything that was specified for removal, ignoring anything that was specified to be ignored, etc.), then it creates a markup out of that tree and returns it.

Internal representation of markup in a form of tree (e.g. < tag: "p", attr: "id", children: ["foo"] >)

Transformation of internal representation (e.g. removal of id attribute)

Output of resulting markup (e.g.

foo

)

HTMLMinifier can’t know that original markup was only half of the tree; it does its best to try to parse it as a full tree and it loses information about tree being malformed or partial in the beginning. As a result, it can’t create a partial/malformed tree at the time of the output.

From NPM for use as a command line app:

npm install html-minifier -g

From NPM for programmatic use:

git clone git://github.com/kangax/html-minifier.git
cd html-minifier
npm link .

Note that almost all options are disabled by default. For command line usage please see html-minifier —help for a list of available options. Experiment and find what works best for you and your project.

• Sample command line: html-minifier —collapse-whitespace —remove-comments —remove-optional-tags —remove-redundant-attributes —remove-script-type-attributes —remove-tag-whitespace —use-short-doctype —minify-css true —minify-js true

var minify = require('html-minifier').minify;
var result = minify('
foo', 
 removeAttributeQuotes: true
>);
result; // '
foo
'

Benchmarks for minified HTML:

Источник

How to minify CSS with Node.js

We’ll be using PostCSS to easily minify a string of CSS in a Node.js script.

First, install the necessary packages:

npm install postcss cssnano autoprefixer

postcss is what we’re using the do the minifying, and cssnano and autoprefixer are plugins for PostCSS that tell PostCSS how to manipulate the CSS. cssnano comes with a bunch of built-in techniques for making CSS smaller, and autoprefixer adds those -webkit or -moz prefixes where necessary to make your CSS compatible with all browsers.

Now that you’ve installed the npm packages, here’s how you use them:

const postcss = require('postcss') const cssnano = require('cssnano') const autoprefixer = require('autoprefixer') // Wrapped in a function so we can use async/await const minifyCss = async () =>  // This CSS might be imported from a file, or anywhere else const css = `  *   font-family: system-ui;  >  ` // We pass in an array of the plugins we want to use: `cssnano` and `autoprefixer` const output = await postcss([cssnano, autoprefixer])  .process(css) // The `css` property of `output` is the minified CSS as a string const minifiedCss = output.css > minifyCss()

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Light Node.js module that compress javascript, css and html files

License

srod/node-minify

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Readme.md

A very light minifier Node.js module.

It allow you to compress JavaScript, CSS and HTML files.

Command Line Interface:

npm install @node-minify/core # Or Yarn yarn add @node-minify/core # Or pnpm pnpm add @node-minify/core

And install the compressor you want

npm install @node-minify/uglify-js # Or Yarn yarn add @node-minify/uglify-js # Or pnpm pnpm add @node-minify/uglify-js

import minify from '@node-minify/core'; import gcc from '@node-minify/google-closure-compiler'; import uglifyjs from '@node-minify/uglify-js'; // Using Google Closure Compiler minify( compressor: gcc, input: 'foo.js', output: 'bar.js', callback: function (err, min) > >); // Using UglifyJS minify( compressor: uglifyjs, input: './**/*.js', output: 'bar.js', callback: function (err, min) > >); // Using Promise var promise = minify( compressor: uglifyjs, input: './**/*.js', output: 'bar.js' >); promise.then(function (min) >); // Async/Await async function doMinify()  const min = await minify( compressor: uglifyjs, input: 'foo.js', output: 'bar.js' >); >

import htmlMinifier from '@node-minify/html-minifier'; const html = `   `; minify( compressor: htmlMinifier, content: html >).then(function (min)  console.log('html min'); console.log(min); >);

Источник

Minify

Minify — a minifier of js , css , html and img files.

To get things done Minify uses this amazing tools:

Install

How to use?

CLI

Usage: minify [options] Options: -h, --help display this help and exit -v, --version display version and exit --js minify javascript --css minify css --html minify html --auto auto detect format

The bash command below creates a code snippet saved as hello.js .

Simply copy + paste the code starting with cat, including the EOT on the last line, and press .

$ cat  EOT > hello.js const hello = 'world'; for (let i = 0; i < hello.length; i++) console.log(hello[i]); > EOT

Use the command minify followed by the path to and name of the js file intended to be minified. This will minify the code and output it to the screen.

$ minify hello.js var a='world';for(let i=0;ia.length;i++)console.log(a[i]);

You can capture the output with the following:

$ minify hello.js > hello.min.js

You can pass input using cat :

cat  EOT | bin/minify.js --js > const hello = 'world'; > > for (let i = 0; i < hello.length; i++) > console.log(hello[i]); > > > EOT var a='world';for(let i=0;i

Minify can be used with async-await and try-to-catch:

import minify> from 'minify'; import tryToCatch from 'try-to-catch'; const options =  html:  removeAttributeQuotes: false, removeOptionalTags: false, >, >; const [error, data] = await tryToCatch(minify, './client.js', options); if (error) return console.error(error.message); console.log(data);

Options

For cli use these options can be provided in a JSON file named .minify.json like so:

< "js": < "mangleClassNames": true, "removeUnusedVariables": true, "removeConsole": false, "removeUselessSpread": true >, "img": < "maxSize": 4096 >, "html": < "removeComments": true, "removeCommentsFromCDATA": true, "removeCDATASectionsFromCDATA": true, "collapseWhitespace": true, "collapseBooleanAttributes": true, "removeAttributeQuotes": true, "removeRedundantAttributes": true, "useShortDoctype": true, "removeEmptyAttributes": true, "removeEmptyElements": false, "removeOptionalTags": true, "removeScriptTypeAttributes": true, "removeStyleLinkTypeAttributes": true, "minifyJS": true, "minifyCSS": true >, "css": < "compatibility": "*" > >

Minify walking up parent directories to locate and read it’s configuration file .minify.json .

Источник