Git Product home page Git Product logo

josee9988 / minifyallcli Goto Github PK

View Code? Open in Web Editor NEW
24.0 2.0 5.0 1.17 MB

πŸ“¦ A lightweight, simple and easy npm tool to π—Ίπ—Άπ—»π—Άπ—³π˜† JSON/C, HTML and CSS! Also known as MinifyAll core! ⭐ Usable as π‘ͺ𝑳𝑰 tool or π’Šπ’Žπ’‘π’π’“π’•π’‚π’ƒπ’π’† in TS/JS as a 𝑴𝑢𝑫𝑼𝑳𝑬 πŸ₯°

Home Page: https://minifyall.jgracia.es/

License: BSD 3-Clause "New" or "Revised" License

JavaScript 1.01% TypeScript 94.53% HTML 0.53% CSS 0.70% Shell 3.23%
minimization cli json html minifier css minify minify-css minify-html minify-json

minifyallcli's Introduction

MinifyAll CLI

A simple package to minify your web code, you will love its simplicity!

With MinifyAll you will be able to minify .html, .css, .json and .jsonc directly from the CLI. It also supports minifying an entire directory recursively (finding the available file extensions), you could also change the suffix of the new minified file (by default "-min"), toggle the minimization of RGB/HEX values, preserve license comments and much more!

Use it as a CLI command or as a normal package!

MinifyAll uses regex as its main and only minimization tool, that will lead to impressive minify times compared to other minifiers that deeply analyze the code.

Check the website or the original VSCode extension.

Version Downloads Vulnerabilities npm bundle size (scoped version) DeepScan grade Node.js CI


Languages available πŸ§ͺπŸ”₯

  • HTML
  • CSS
  • JSON
  • JSONC

Installation

Global installation

npm i -g @josee9988/minifyall # install the package globally

Package installation

npm i @josee9988/minifyall --save # install the package in your project

Usage

CLI usage

minifyall --help or minifyall --help will output:

MinifyAllCli v1.2.2

Usage: minifyall [file] [options]

Global options:

-h, --help              Output usage information. (will ignore any other arguments)
-v, --version           Output package version. (will ignore any other arguments)
-m, --minify-hex                Will minify the hexadecimal color values. (default = false)
-s, --suffix            Append a suffix string to the minified filename
-o, --output            The new output file (will ignore "--suffix" argument)
-d, --dir               Will recursively look for HTML/CSS/JSON files inside a directory and will minify every one (will ignore "--output" argument)

Examples of use:
minifyall --help
minifyall --version
minifyall myFile.css
minifyall pathToMyFile/dirs/myFile.css
minifyall myFile.css -m -s .min
minifyall myFile.css --minify-hex -s -minified
minifyall myFile.css --output someFolder/myNewFile.css
minifyall --dir myFolder/

For more information visit: https://github.com/Josee9988/MinifyAllCli

Package usage

  1. Import the package.

    import {MinifyAllClass} from '@josee9988/minifyall'; // import it
  2. Initialize the minifier.

    const minifyall: MinifyAllClass = new MinifyAllClass(false); // initialize the class (true for minifying color values such as HEXADECIMAL/RGB/RGBA)
  3. Use the minifier by passing the function your array of strings (: string[]) with your non minified code.

    const minifiedHtmlCode: string = minifyall.minifyHtml(HTMLNotMinified); // html
    const minifiedCssCode: string = minifyall.minifyCssScssLessSass(CSSNotMinified); // css
    const minifiedJsonCode: string = minifyall.minifyJsonJsonc(JSONNotMinified); // json/c

Built with


Contributing

This project is actively looking for new contributors to develop new functions, maintain and improve the project. If you are interested make sure to fork the project and pull-request your improvements to be added as a contributor!


Made with a lot of ❀️❀️ by @Josee9988

minifyallcli's People

Contributors

dependabot[bot] avatar josee9988 avatar lenart91 avatar mehfoozurrehman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

minifyallcli's Issues

MinifyAll not deleting spaces in JSON arrays

Issue Type: Bug

Just try to minify a number array:

[
    [
        1,
        2,
        3
    ],
    [
        4,
        5,
        6
    ],
    [
        7,
        8,
        9
    ]
]

And it will keep the spaces between numbers. They are not necessary for syntax, and use a lot of space. I tried formatting a GeoJSON and it didn't get to the minimal size. It's annoying to have to use another command (regex in my case) to delete the remaining spaces.

Extension version: 2.4.9
VS Code version: Code 1.50.1 (d2e414d9e4239a252d1ab117bd7067f125afd80a, 2020-10-13T15:06:15.712Z)
OS version: Windows_NT x64 10.0.18362

System Info
Item Value
CPUs Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz (8 x 1992)
GPU Status 2d_canvas: enabled
flash_3d: enabled
flash_stage3d: enabled
flash_stage3d_baseline: enabled
gpu_compositing: enabled
multiple_raster_threads: enabled_on
oop_rasterization: disabled_off
opengl: enabled_on
protected_video_decode: unavailable_off
rasterization: enabled
skia_renderer: disabled_off_ok
video_decode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
Load (avg) undefined
Memory (System) 7.89GB (2.04GB free)
Process Argv --crash-reporter-id f94e7b37-942b-4ff6-b5fb-4d0699e41a01
Screen Reader no
VM 0%

Preserve license information/header in minified file

πŸš€ Feature Request

Is your feature request related to a problem? Please describe.

  • The extension removes all comments including all license information (like the header at the top of the file).

Describe the solution you'd like

  • Add some option to keep the license information intact. Either in the extension settings in VSCode, or via some annotation like Google Closure Compiler uses.
/* 
 * @preserve
 * TERMS OF USE - EASING EQUATIONS
 * Open source under the BSD License.
 * Copyright 2001 Robert Penner All rights reserved.
 */

becomes:

/* 
  TERMS OF USE - EASING EQUATIONS
  Open source under the BSD License.
  Copyright 2001 Robert Penner All rights reserved.
 */

Source: https://softwareengineering.stackexchange.com/questions/45033/can-i-minify-javascript-that-requires-copyright-notice


Describe alternatives you've considered

  • Copy the header from the original file and insert manually...

Additional context

Minified file contains a leading space

Not a huge deal, but just an FYI that when I minify a CSS file the minified files has a space at the beginning containing an extra/unnecessary character.

Allow reading settings from specified file

πŸš€ Feature Request

Is your feature request related to a problem? Please describe.

  • Having used the plugin version for a while I noticed only a small number of the options available in said version are available for the client. (Disabling certain file types and all of the Terser options)

Describe the solution you'd like

  • A option to specify a json file that will be used to change default values. Command line arguments would override settings from the config.
  • For instance:
    minifyall myFile.js -c path/to/config.json -m
    with config.json as:
"terserMinifyOptions": {
	"parse": {
		"bare_returns": true
	}
},
"disableHexadecimalShortener": false
  • would have the parser support top level return statements but still minify the hexadecimal color values even if said config file said otherwise.

Describe alternatives you've considered

  • While having the options all added as cmd options like -m would work; this would make it harder to understand and work with.

Does dot rename JS variables in HTML files inside <script> tag

🐞 Bug Report

Describe the bug

Exactly as mentioned in the title:

This Code:

<template>
  <img id="img" alt="">
</template>
<script type="text/javascript">
  var objectFitSupport = 'objectFit' in document.body.style;
  module.exports = function (e,subElements) {
    var ats = $.getAttributes(e);
    var img = subElements.img;
    if (ats.alt) {
      img.setAttribute('alt', ats.alt);
    }
    img.onload = function () {
      $.fastDOM.mutate(function () {
        if (objectFitSupport) {
          img.style.opacity = 1;
        } else {
          e.style.backgroundImage = 'url(' + img.src + ')';
        }
      });
      $.trigger(e, 'load');
    };
    $.extend(e, {
      src: {
        __change: function (v) {
          img.src = '';
          img.style.opacity = 0;
          img.removeAttribute('src');

          /* Solution for Handlebars */
          if ($.contains(v, '{')) {
            console.warn('invalid image url', v);
            return null;
          }

          var obs = $.onViewport(e, function () {
            img.src = v;
            obs.unobserve(e);
          });
          return v;
        }
      }
    });
  };
</script>

<style>
  MDL-IMG {
    display: inline-block;
    overflow: hidden;
    margin: auto;
    position: relative;
    vertical-align: middle;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
  }

  MDL-IMG[fit="contain"] {
    background-size: contain
  }

  MDL-IMG[fit="contain"] img {
    object-fit: contain
  }

  MDL-IMG img {
    border: none;
    position: absolute;
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s;
    object-fit: cover
  }
</style>

After minifing, this is the resul:

<template><img id="img" alt=""></template><script type="text/javascript">var objectFitSupport='objectFit' in document.body.style; module.exports=function (e,subElements){ var ats=$.getAttributes(e); var img=subElements.img; if (ats.alt){ img.setAttribute('alt', ats.alt);} img.onload=function (){ $.fastDOM.mutate(function (){ if (objectFitSupport){ img.style.opacity=1;} else{ e.style.backgroundImage='url(' + img.src + ')';}}); $.trigger(e, 'load');}; $.extend(e,{ src:{ __change:function (v){ img.src=''; img.style.opacity=0; img.removeAttribute('src'); if ($.contains(v, '{')){ console.warn('invalid image url', v); return null;} var obs=$.onViewport(e, function (){ img.src=v; obs.unobserve(e);}); return v;}}});};
</script><style>MDL-IMG{ display:inline-block; overflow:hidden; margin:auto; position:relative; vertical-align:middle; background-position:center center; background-repeat:no-repeat; background-size:cover} MDL-IMG[fit="contain"]{ background-size:contain} MDL-IMG[fit="contain"] img{ object-fit:contain} MDL-IMG img{ border:none; position:absolute; margin:auto; display:block; width:100%; height:100%; opacity:0; transition:opacity 0.5s; object-fit:cover}
</style>

Your environment

  • OS: Windows 10
  • Node version: 12.19.0

Space removed in JSON values

🐞 Bug Report

Describe the bug

Version 2.4.13 on VS Code 1.52.1

On JSON which has string value, space in value is removed on minify.
Example
{
"headers": "Content-Type:application/json\nAccept: application/json",
"body": "{"login":{"username": "${username}","password": "${password}"}}"
}
Space in values are removed on Minify. Example, after Accept:, between username, between pasword...
This is after beautified, minified JSON. (problem is creted during minify operation
{
"headers": "Content-Type:application/json\nAccept:application/json",
"body": "{"login":{"username":"${username}","password":"${password}"}}"
}

Your environment

  • OS: Windows 10
    MinifyAll: 2.4.13
    VS Code: 1.52.1 user install

superfluous space and unit in CSS file

in a CSS file:

  • before minified:
.className {
  width   :   0%   ;
}
  • after minified:
.className{width :0%}
  • expected:
.className{width:0}

The space between property name width and colon : is not necessary.

And the unit of 0% is unnecessary, too. It should be just 0.

error when inner comments

eg:

<script>
    function test($targetForm, data) {
        $.map(data, function (value, key) {
            if (key == "A") {
                alert('A')
            };
            // if (key == "B") {
            // }
        });
    }
</script>

will get the code:

<script>function test($targetForm, data){ $.map(data, function (value, key){ if (key=="A"){ alert('A')}; // if (key=="B"){ //}});} </script>

[Bug][PHP] Removal of required ';' char on minification

🐞 Bug Report

Describe the bug

PHP minification may create invalid syntax. When a ';' is directly in-front of a '}' the ';' is removed creating a syntax error.


Is this a regression?

Not as far as I'm aware


To Reproduce

Minify:

<?php
if(true){$var=1;$var2=2;}
if(true){$var=1;$var2=2; }
?>

Expected behaviour

<?php
if(true){$var=1;$var2=2;}
if(true){$var=1;$var2=2;}
?>

or

<?php $var=1;$var2=2;?>

Observed behaviour

<?php
if(true){$var=1;$var2=2}
if(true){$var=1;$var2=2;}
?>

Your environment

  • Plugin version: v2.10.0

JSON - Removes space after comma inside strings

Describe the bug
Whenever you minify a JSON document, it removes space after comma inside strings while keeping superfluous spaces in other locations and sometimes keep a new line at the end.

To Reproduce
Steps to reproduce the behavior:

  1. Open a JSON document
  2. Enter something like:
[
  {
    "textStrings": "Welcome, stay a while!"
  },
  {
    "textStrings": "Goodbye, take care!"
  }
]
  1. Minify and the output becomes:
[{ "textStrings":"Welcome,stay a while!"},{ "textStrings":"Goodbye,take care!"}
]

Expected behavior
Expected output would be:

[{"textStrings":"Welcome, stay a while!"},{"textStrings":"Goodbye, take care!"}]

preserve <!--[if mso]> <![endif]--> from HTML minification

πŸš€ Enhancement Request

Is your enhancement request related to a problem? Please describe.

minify all remove instruction < !--[if mso]> <![endif]-- > in HTML minification.
*


Describe the solution you'd like

preserve < !--[if mso]> <![endif]-- > instruction in minified files
*


Describe alternatives you've considered


Additional context

Percent sign being removed in CSS Calc()

This
width: calc(100% - 60px);

Is being minified to this:
width:calc(100 - 60px);

Not sure if this is a bug or a setting, but I can't find this as a setting to change.

Minifying JSON removes spaces around colons inside string values

How to reproduce :

  1. Create a JSON file with following content
{
  "key": "string with : spaces around a colon"
}
  1. Minify the document

Expected result:

{"key":"string with : spaces around a colon"}

Actual result:

{"key":"string with:spaces around a colon"}

MinifyAll:
Version: v2.4.9

VSCode:
Version: 1.49.2
Commit: e5e9e69aed6e1984f7499b7af85b3d05f9a6883a
Date: 2020-09-24T16:23:52.277Z
Electron: 9.2.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Darwin x64 18.7.0

Css values

Some of my values are not minified correctly.

this one, as example;

@media screen and (min-width: 1025px) { #myid{ box-shadow: #c9c9c9 20px 20px 60px, #ffffff -20px -20px 60px; } }

results in

{box-shadow:#c9c9c9 20px 20px 60px,#ffffff -20px0px -20px 60px}

Haven't tried adding all 4 expected values.

Option to disable unit removal from calc()

Is your feature request related to a problem? Please describe.
When I am using the Minifier to minify my CSS, it removes that unit from the number in my calc() statements. This seems to be a problem in Chrome, where subtractions of numbers without units will cause an "invalid property value" issue. This is the original CSS:

header {
     margin: 0 calc(0px - (50vw - 50%)) 3rem !important;
}

which gets minified to this:

header{margin:0 calc(0 - (50vw - 50%)) 3rem!important;}

Describe the solution you'd like
I would love to have an option where I could specify that I dont want the Minifier to remove units from numbers (a tickbox would suffice).

Describe alternatives you've considered
I am not sure at this point if Chrome is right in reporting an "invalid property value" or if it is a bug. I might file a bug against Chrome later today.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.