Minify for Sublime Text

What is Minify

Minify for Sublime Text can create a minified version of a currently open CSS, HTML, JavaScript, JSON or SVG file.

Minify generates a new file with an altered file extension such as .min.css, .min.html, .min.js, .min.json or .min.svg. It can be easily configured to generate .map files too for minified CSS and JavaScript files.

Compared to other Sublime Text minifier packages Minify is very light: the plugin itself is less than 250 lines of Python code. Once installed Minify does not need Internet access to do its job, it works offline.

Minify has been tested under both Sublime Text 2 and Sublime Text 3 and it should work fine on all supported platforms (Linux, Mac OS X and Windows).

Minify depends on other programs written in Node.js to do its job. Detailed installation instructions for those dependencies are provided below.

Which 3rd party programs are used by Minify

Installation in Three Easy Steps

1. Install Minify package for Sublime Text:
   
   a) Install Minify via Package Control (this is the recommended method) :
   
   First install Package Control - see installation instructions
   
   Then inside Sublime Text press ctrl + shift + p ( super + shift + p on Mac OS X ) and find Package Control: Install Package then press Enter. You can search for the Minify package by entering its name Minify
   
   b) Alternatively, you can install Minify from GitHub directly (this is NOT recommended) :
   
   on Mac OS X:
   
   git clone git://github.com/tssajo/Minify.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Minify
   
   Note: Replace “Sublime\ Text\ 3” with “Sublime\ Text\ 2” in the above command if you are using Sublime Text 2.
   
   on Windows:
   
   git clone git://github.com/tssajo/Minify.git %APPDATA%\Sublime Text 3\Packages\Minify
   
   Note: Replace “Sublime Text 3” with “Sublime Text 2” in the above command if you are using Sublime Text 2.

2. Install Node.js:
   
   Windows and Mac OS X users should just visit nodejs.org and click on the INSTALL button,
   Linux users can download pre-compiled binary files from https://nodejs.org/download/
   
   After successful installation, please make sure that node is in your PATH, here is how to test it:
   
   Open up a shell window (Terminal on Mac OS X, CMD.exe on Windows) and issue the following command:
   
   node --version
   
   You should see a version number. But if you see an error message such as command not found or something similar then node is not available via your PATH and you must fix this!

3. Install required Node.js CLI apps:
   
   From a shell window (Terminal on Mac OS X, CMD.exe on Windows) issue the following command:
   
   npm install -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo
   
   Notes:
   
   If you are on Mac OS X and you get an error here then issue the following command from Terminal: sudo chown -R $USER /usr/local and then try to issue the npm install command from above again.
   
   If you are never going to work with e.g. SVG files then you can leave out svgo from the above npm install command. You can also leave out uglifycss, etc.
   
   If you already have some or all of the above Node.js CLI apps installed on your system then it is recommended to update them all to the latest version with the following command:
   
   npm update -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo
   
   Please test that the installed Node.js CLI apps are available via your PATH, here is how:
   
   Still from a shell window (Terminal on Mac OS X, CMD.exe on Windows) issue the following command, for example:
   
   cleancss --version
   
   You should see a version number. But if you see an error message such as command not found or something similar then cleancss is not available via your PATH and you must fix this!
   
   You may want to do this test for all Node.js CLI apps (cleancss, uglifycss, js-beautify, html-minifier, uglifyjs, minjson and svgo).
   
   

How to use Minify

Open a .css or .htm or .html or .js or .json or .svg file in your Sublime Text editor and you can

a) use the Context Menu inside the Sublime Text editor window,

b) access the Minify file or Beautify file commands under Tools / Minify menu in Sublime Text,

c) use one of the following keyboard shortcuts:

ctrl + alt + m ( super + alt + m on Mac OS X )

This minifies the current buffer and saves the minified version into the same directory with the appropriate .min.css or .min.htm or .min.html or .min.js or .min.svg file extension then it opens the minified file in a new editor window.

ctrl + alt + shift + m ( super + alt + shift + m on Mac OS X )

This beautifies the current buffer and saves the beautified version into the same directory with the appropriate .beautified.css or .beautified.htm or .beautified.html or .beautified.js or .pretty.svg file extension then it opens the beautified file in a new editor tab.

User settings

You can put your customized settings here:

(Preferences > Package Settings > Minify > Settings - User)

To find out what the possible options are please see:

(Preferences > Package Settings > Minify > Settings - Default)

Please do not edit the Settings - Default file!!

Project settings

Also, you can override the default and user settings for individual projects. Just add a “Minify” object to the “settings” object in the project's .sublime-project file containing your project specific settings.

Example:

{
    "settings": {
        "Minify": {
            "open_file": false,
            "auto_minify_on_save": true,
            "allowed_file_types": [
                "css",
                "js",
                "svg"
            ]
        }
    }
}

License

See LICENSE.md file for licensing information.