abagshaw / brackets-minifier

Minifies and Concatenates JS and CSS in Brackets using UglifyJS3 and CleanCSS

NOTE: This plugin is currently unmaintained. If anyone wants to take over work on it let me know!

Minifier for Brackets

Minifies JavaScript and CSS files in Brackets and saves to {filename}.min.{ext} using UglifyJS3 (for JavaScript) and CleanCSS (for CSS).

Installation

1. Run Brackets
2. Select File > Install Extension...
3. Enter https://github.com/abagshaw/brackets-minifier/archive/master.zip as Extension URL.
4. Click Install to begin downloading and installing the extension.

Alternative Installation Method

Clone this repository into ~/Library/Application Support/Brackets/extensions/user/ and restart Brackets.

Features

• Single File Minification
• Project Minification
• Custom Save Directories
• Minifier Options

---

Single File Minification

To minify a file, use the keyboard shortcut Cmd/Ctrl+Alt+M (this will also save the file if there are unsaved changes). You can also minify files on save by checking Minify on Save in the Edit menu.

---

Project Minification

To minify all JS and CSS files in the current project (and subdirectories), use the keyboard shortcut Cmd/Ctrl+Alt+A. You can also set the whole project to be minified on save by going to Edit -> Minifier Preferences and selecting Minify Project on Save. This will minify all the JS and CSS files in the current project when saving any file located in the current project - not necessarily a JS or CSS file. If any file about to be minified has unsaved changes, it will be saved first.

NOTE: To minify the whole project on save you must also check the Minify on Save option in the Edit menu.

NOTE: Files open in the Working Files area that are not located within the current project directory are not considered part of the current project and will not be included in project minification, affected by project minification settings or trigger project minification on save. These files can still be minified using single file minification.

Excluding Files/Directories/Filetypes

You can exclude certain directories and files by entering each directory/file on a new line in the Directories/Files to Exclude from Project Minification area. Excluded directories must include trailing slash! Excluded JS/CSS files or JS/CSS files in excluded directories will not be minified during project minification and will also be ignored during concatenation.

You can also exclude all JS or CSS files from being minified by unchecking either of the Minify JavaScript during Project Minification or Minify CSS during Project Minification options in the Minifier Preferences panel.

NOTE: Concatenated files are always minified whether or not their specific filetype is disabled for minification as described above.

NOTE: Excluded files or files of an excluded directory/filetype can still be minified using single file minification.

---

Custom Save Directories

To specify custom paths to save minified files to, go to Edit -> Minifier Preferences and enter the desired paths for minified CSS and JS files in the spaces provided. These paths begin at the project root directory.

Leaving a path blank will set the minified files of that type to be saved in the same directory as the original non-minified file.

NOTE: Custom save directories will apply to single file minification (on files within the current project), project minification and concatenated files generated with the concatenation feature.

---

Concatenation

To enable concatenation, go to Edit -> Minifier Preferences and enter the desired name for your concatenated CSS and/or JS file(s) in the spaces provided in the concatenation section. A blank field will disable concatenation for that type of file (i.e. leaving the name for concatenated CSS file field blank will disable CSS concatenation). Only enter the name of the file without the extension. For example, entering (alljs in the JS concatenated file name field will result in a alljs.js file and alljs.min.js file being created for the raw concatenated file and minified concatenated file respectively). Concatenated files will be saved in the root of the project directory or in the custom save directory if one is specified for that specific file type (CSS or JS).

NOTE: Concatenation only runs during project minification and only applies to files within the current project.

NOTE: Concatenation will ignore files with the same name as the desired name for the output concatenation file and will also ignore files ending in .min.js or .min.css for JS and CSS concatenation respectively.

---

Minifier Options

You can choose to pass your own set of UglifyJS3 options and/or CleanCSS options by navigating to Edit -> Minifier Preferences and scrolling down to the very bottom.

NOTE: Options must be passed as a valid JSON object.

For example, to disable mangling and compression during JS minification you would enter the following in the UglifyJS3 Options area:

{
  "mangle": false,
  "compress": false
}

brackets-minifier's Issues

Minifying javascript with backticks results in undefined

When using backticks in my javascript `, the minified file output is simply "undefined".

I find backticks useful for writing out blocks of html I want to insert into a page nicely, so it would be a nice addition if support for this could be added or fixed.

Does not minify JSON

Does not minify JSON.

Finnish Translation for 1.1.0

I would like to keep the Finnish translation going and the next version of this plugin has a lot more features which require more strings translation. If someone (specifically @valtlait ) could translate the attached file as soon as possible that would be great!

English Strings File:
http://1drv.ms/1LLmzRj

P.S. Not that I need to say this...but please keep any HTML intact.

Features of this minifier

This minifier needs to be able to do what this minifier can do in Sublime.

stopped working

When I save a file it should compile the minified version, but there is an error:
Name expected @ main.js : 143

concat feature not working

I created a small project with two js files to test the concat feature. When I run Minify Project two new js files is created but nothing more. The status message in Brackets shows Minifying project forever. I'm using a Mac.

fix console errors

Not a serious issue, but noticed the following errors in console after opening brackets:

Deprecated: Do not use $().on/off() on Brackets modules and model objects. Call on()/off() directly on the object without a $() wrapper.

Looks like an easy fix...

main.js#L267

DocumentManager.on("documentSaved", function(event, doc) {
    ...
});

main.js#L301

automaton.on('checkedStateChange', function() {
    ...
});

Concatenate on Save Option

Love the concatenation option and I've been enjoying using it on several different projects. However, I think it would be a useful feature to allow concatenation on save, rather than just on project minification.

ES6 "for..of" not supported?

I get the following error when I use the ES6 for..of construct:
Unexpected token name «of», expected punc «;»

E.g.:
for ( var k of array ) ...

I get absolutely no response from this minifier

I been playing around with it for the last 30 minutes. No response.

JSON File

Hi, on save why its creating .brackets.json file in root directory?

save without .min

Hi,

Anyway I can save without .min in the file name?
That is, can I have style.scss save as style.css instead of style.min.css?

Thanks

JS minification doesn't work

Since last update for me js minification doesn't work at all.

Does not minify some of the files

Brackets version 1.9
Minifier version 2.0.0

I have a custom path set for my minified JS files at /build. I have close to 60 JS files in my project in the /scripts directory. When I try to minify project or simply minify, only some of these JS files are minified. The rest of the files are never minified. If I delete the minified JS files and try to re-minify them again, exactly those files are minified again, and some files are ignored every time. If you could help me with the problem, that'd be great.

P.S. the minifier extension is awesome, thanks for all the hard work.

File contents "undefined"

Maybe I'm doing something wrong but minifying any js creates a file which contains only "undefined." I haven't tried to minify any css.

Windows 10 Pro 1809, Brackets Release 1.14 build 1.14.0-17740

{ "less": [ "css/cat.less", "css/cat.mgr.less" ], "brackets-minifier.on-save-project": false, "brackets-minifier.js-project-minify": true, "brackets-minifier.css-project-minify": false, "brackets-minifier.js-custom-path": "", "brackets-minifier.css-custom-path": "", "brackets-minifier.project-exclude": "", "brackets-minifier.concat-js-filename": "", "brackets-minifier.concat-css-filename": "", "brackets-minifier.uglifyjs-options": "{}", "brackets-minifier.cleancss-options": "{}" }

The only messages in the console are JSLint warnings. Also, don't know if it's relevant or not, but Ctrl+Alt+M doesn't work. I have to go to Edit>Minify to get anything to happen. Edit>Minify Project also works but all the files contain only "undefined"

base64 images causes W3C CSS Validator errors

The minifier strips quotation marks from background-image: url("data:image/png;base64....") which causes the W3C Validator to mark them as errors.

Concatenation option?

I may have missed something, but if not, I'd like to request:

• being able to concatenate all files together into one file e.g. build.js
• having two build files output
  • build.min.js (minified concatenated file)
  • build.js (concatenated file, no minification)
• specify an output name for build files (default name could be "build"?)

Hope that makes sense... what do you think?

Minifying error

When minifying
@font-face { src: url("../fonts/icons.eot?45335921"); src: url("../fonts/icons.eot?45335921#iefix") format("embedded-opentype"), url("../fonts/icons.woff2?45335921") format("woff2"), url("../fonts/icons.woff?45335921") format("woff"), url("../fonts/icons.ttf?45335921") format("truetype"), url("../fonts/icons.svg?45335921#fontello") format("svg"); font-family: 'ftwp-icon'; },

the result is
@font-face{src:url(fonts/icons.eot?45335921);src:url(fonts/icons.eot?45335921#iefix) format("embedded-opentype"),url(fonts/icons.woff2?45335921) format("woff2"),url(fonts/icons.woff?45335921) format("woff"),url(fonts/icons.ttf?45335921) format("truetype"),url(fonts/icons.svg?45335921#fontello) format("svg");font-family:ftwp-icon}.

It deleted the "../" character. Could you fix this bug? Thanks.

Preserve License Comments

How can I keep JavaScript/CSS comments prefixed by /*! or /** or contains @license in the block? Editing the options parameters in UglifyJS/CSS instance from the source did not change anything.

Status text colour

The minification status text—shown in the bottom info bar—is black while in dark mode, making it unreadable.

My theme is the built-in "Brackets Dark", and my macOS appearance is also set to Dark, though I don't think that affects anything.

Variable concatSavePath is returning a duplicate path

Hi. First, thanks for the extension, its very useful, and sorry for my english... I think, i found an error. The file main.js, line 186, is: concatSavePath = FileUtils.convertToNativePath(stripSlashes(mainProjectPath).concat("/").concat(stripSlashes(prefs.get("css-custom-path"))).concat("/").concat(stripSlashes(prefs.get("concat-css-filename"))).concat(".css"));

The problem is when you save with concatenate ON and in a custom directory, because the variable concatSavePath is returning a duplicate path: the mainProjectPath and the css-custom-path. Ex: C:\project\SourceOfMyBracketsProjectC:\project\MyCustomDirectory.

That line should be: concatSavePath = FileUtils.convertToNativePath(stripSlashes(prefs.get("css-custom-path")).concat("/").concat(stripSlashes(prefs.get("concat-css-filename"))).concat(".css")); . Otherwise, on saving, always returns error... I did that change and now the file is writing perfect!

regards!
Gastón

Standard command minified project, not single file

On OSX you added the alt-cmd to minify project instead single file. Now it did my complete project which is did not want it tp do???

Error when ES6 Template literals minify

Error from console:
Unexpected character '`'

Minifier create new min file

When i minify css it creates new style.min.css file.
How can i minfy my current file?

Change behaviour with @import rules in css files

I have @import rules in my css files.
If I manually or automatically save minified versions the @import rule is left out.

Example test.css:

@charset "UTF-8";
@import url(other/normalize.min.css);

/**
**/

body {
    background: black;
}

Result test.min.css:
@charset "UTF-8";body{background:#000}

Is it possible to change this behaviour? I'd like to have the @import rule just copied over.
Thanks for the extension.
Best regards
sthag

Minification on save just minimizes Brackets in OSX

The brackets-minifier README.md states

To minify a file, use the keyboard shortcut Cmd/Ctrl+M

According to Adobe's User Key Bindings Cmd-M "cannot be overridden on Mac."

Adding this override to keymap.json didn't seem to help either, even with the corresponding change in the main.js file.

"overrides": {
        "Cmd-Alt-M": "minifier.min"
    }

Are there any other ways to minimize a file w/this extension?

Italian Translation for 1.1.0

I would like to keep the Italian translation going and the next version of this plugin has a lot more features which require more strings translation. If someone (specifically @Denisov21 ) could translate the attached file as soon as possible that would be great!

English Strings File:
http://1drv.ms/1LLmzRj

P.S. Not that I need to say this...but please keep any HTML intact

URL minified

Since the last version the plugin minifies the url in css in the wrong way: for example url('../images/file.svg') is minified as url(images/file.svg). Same happens with url("../images/file.svg") and url(../images/file.svg).