olback / es6-css-minify

Easily minify CSS and JavaScript in VS Code
https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify
MIT License
47 stars 13 forks source link

Where to put the .uglifyrc file? #73

Closed ebewley closed 5 years ago

ebewley commented 5 years ago

I have a project in VSCode that I tried to use this extension on, and I cannot figure out how to get it to pick up the .uglifyrc file and reduce code with the toplevel property. I have tried placing the ".uglifyrc" file in the workspace root, project directory and subdirectory beside the file I want it to affect. I have also tried naming it according to the name of the file I want it to affect. If the documentation is correct (though quite ambiguous), then it does not appear to work.

Original code: (only a piece -- yes, example could use a switch) function() { return this.InventoryItemStatusID === 3 ? 'crli' : this.InventoryItemStatusID === 4 ? 'cli' : 'err'; // unrecognized type }

Expected output or similar: function(){var i=this.InventoryItemStatusID;return i=== 3?'crli':i===4?'cli':'err';}

.uglifyrc { toplevel: true }

Please explain how to get this to work for a specific file or all files in vscode. Thanks, Eric

olback commented 5 years ago

The .uglifyrc config file has to be in the root of the workspace. Once the file is created/modified the config has to be reloaded with Minify: Reload config command. The config is applied to all Javascript files in that workspace.

I just tested this feature on Linux and it worked for me. If you can't get it to work after placing the .uglifyrc file in the root and reloading the config, please upload a compressed workspace with the config file and a example JS file. I'd also like to know what OS you're on so that I can isolate the issue.

I'll leave this issue open until I improve the documentation and add a file listener for the config files so that the extension reloads them automatically.

If you fixed it, please let me know!

tomgallagher commented 5 years ago

I'm using on Windows and would like to customise the settings of Terser. Not sure how to do this. Just an example of a very basic file and location - I'm assuming the folder used for the workspace - would be helpful. Also, do you run the command in the terminal?

tomgallagher commented 5 years ago

I have the.uglifyrc file at the root of the workspace, I get the message that the file is loaded on the reload config command and then it cannot parse this as the contents of the file:

{
    output: {
        beautify: false,
        preamble: "/* minified */"
    }
}
ebewley commented 5 years ago

I moved the .uglifyrc file back to the root and ran Minify: Reload config again, and it still produces the following:

get:function(){return this.InventoryItemStatusID?1===this.InventoryItemStatusID||2===this.InventoryItemStatusID?"pli":3===this.InventoryItemStatusID?"prli":4===this.InventoryItemStatusID?"sli":5===this.InventoryItemStatusID?"rli":"error":this.LinkedOrderDetailItemID?"crli":"cli"}

I'm still not getting the expected result. Shouldn't it minify to the following?

get:function(){var a=this.InventoryItemStatusID;return a?1===a||2===a?"pli":3===a?"prli":4===a?"sli":5===a?"rli":"error":this.LinkedOrderDetailItemID?"crli":"cli"}

On Sun, Jul 7, 2019 at 2:55 AM Turbo notifications@github.com wrote:

I have the .uglifyrc file at the root of the workspace, I get the message that the file is loaded on the reload config command and then it cannot parse this as the contents of the file:

{ output: { beautify: false, preamble: "/ minified /" } }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/olback/es6-css-minify/issues/73?email_source=notifications&email_token=ABL7XUNN27GVVEIEIO5IPCDP6GVQRA5CNFSM4H5NNVE2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZLHNFQ#issuecomment-508982934, or mute the thread https://github.com/notifications/unsubscribe-auth/ABL7XUIBXE3H2COR56DSYILP6GVQRANCNFSM4H5NNVEQ .

olback commented 5 years ago

@ebewley

I have a file structure like this:

:open_file_folder: minify_issue_73   :page_facing_up: .uglifyrc   :page_facing_up: main.js

main.js:

function a() {
    return this.InventoryItemStatusID === 3
        ? 'crli'
        : this.InventoryItemStatusID === 4
            ? 'cli'
            : 'err'; // unrecognized type
}

a()

.uglifyrc config: { "toplevel": true } yields:

!function(){3===this.InventoryItemStatusID||this.InventoryItemStatusID}();

using { "toplevel": false } yields:

function a(){return 3===this.InventoryItemStatusID?"crli":4===this.InventoryItemStatusID?"cli":"err"}a();
olback commented 5 years ago

@tomgallagher That's not valid JSON. Properties in JSON have to be quoted.

Your config would look like this:

{
    "output": {
        "beautify": false,
        "preamble": "/* minified */"
    }
}

and NOT like this:

// This is valid JavaScript, but the config file has to be in JSON.
{
    output: {
        beautify: false,
        preamble: "/* minified */"
    }
}
tomgallagher commented 5 years ago

Great that's simple thanks. Not sure how I missed that it needed to be JSON

ebewley commented 5 years ago

Possibly a bit off topic, but here goes...

While I agree with @olback that the ECMA-400 spec does seem to clearly state that "a name is a string", I must respectfully disagree with the statement that one must always be required to surround a JSON property name with quotes. If you read and consider the ECMA-400 spec in its entirety concerning names, you will find why it is permitted by many JSON processors that names not be surrounded by quotes.

First of all, the spec makes mention in a few locations that JSON processors are allowed to contain special behaviors, and that it is providing a definition of the base semantics of the format. The statement "a name is a string" can be read as requiring names to be surrounded by double quotes, or as most processor developers seem to have done, read the statement as meaning that the processor must treat a JSON property name as a string regardless of its form.

Many processors allow for mathematical expressions as the value of a name/value pair. However, I think you will find that the majority of them do not carry this leniency forward when a name is encountered which contains mathematical symbols or spaces. The spec clearly states that the data be composed of name value pairs, so in the interest of leniency, it would be just as correct for a parser to read everything up to a colon as being a name.

When in doubt in composing JSON documents/content, quote names. But when writing a parser, one should probably maximize the allowances/forgiveness of values to the greatest extent possible. I impose this rule on myself and employees (and colleagues when I can) simply because specs are not written in a globally logical language, but in languages which are subject to various forms of ambiguities during translation. Leniency in parsers can help maximize adoption of modules/extensions, whereas a lack of leniency could just as easily cause a developer to consider the module/extension as being incompatible for their use. Personally, I would like to see minifiers provide an option for reading/writing JSON data with or without quotes around names, since that would further reduce the size of the content for implementations that make use of JSON parsers which allow this common behavior.

olback commented 5 years ago

@ebewley Did you figure this out?

ebewley commented 5 years ago

I have the .uglifyrc file and its "toplevel" entry working, but it does not reduce down as far as I would like. Its not a big deal, but would certainly be nice to have for it set repeated values into a local variable and make use of that instead of repeating the length original variable name. I have no other issues at this time. My last post about the JSON formatting was just an explanation that I hoped that at least some would find helpful and think back to when they found that a JSON config file was not working for them. At this point, I'm ok with everything and think the issue can be marked closed, if you'd like. Thanks

olback commented 5 years ago

@ebewley I see.

I'm using terser to minify JavaScript. The settings you specify in .uglifyrc just get passed directly to terser alongside the JavaScript input. I'm not the one controlling what the options do. You can read more about the terser config here.

Sorry for the confusion.