ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Minify

by tssajo ST2/ST3

Minify for Sublime Text allows you to quickly minify and/or beautify CSS, JavaScript, JSON, HTML and SVG files -- compatible with ST2 and ST3

Labels minification

Details

Installs

  • Total 74K
  • Win 41K
  • OS X 24K
  • Linux 9K
Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13 Feb 12 Feb 11 Feb 10 Feb 9 Feb 8 Feb 7 Feb 6 Feb 5 Feb 4 Feb 3 Feb 2 Feb 1 Jan 31 Jan 30 Jan 29 Jan 28 Jan 27 Jan 26 Jan 25 Jan 24 Jan 23 Jan 22 Jan 21 Jan 20 Jan 19 Jan 18 Jan 17 Jan 16 Jan 15 Jan 14 Jan 13 Jan 12 Jan 11
Windows 27 25 50 59 46 41 57 28 32 43 41 65 53 49 31 19 48 54 47 62 57 29 36 59 72 48 61 48 16 23 49 56 43 51 46 29 39 50 60 51 44 26 22 28 46 43
OS X 5 8 13 21 21 19 14 3 10 20 14 16 15 19 12 10 20 31 27 18 24 4 11 22 22 24 22 21 8 13 21 17 25 19 16 4 13 21 17 22 24 12 10 14 19 16
Linux 3 5 10 10 5 7 5 9 11 8 12 9 8 9 2 6 6 10 10 6 8 4 4 11 7 7 7 5 7 9 8 8 9 18 17 5 8 17 11 12 11 4 2 6 9 7

Readme

Source
raw.​githubusercontent.​com

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

Minify Beautify
CSS clean-css + clean-css-cli or uglifycss js-beautify –css
HTML html-minifier js-beautify –html
JavaScript uglifyjs uglifyjs –beautify
JSON minjson (uses uglifyjs) minjson (uses uglifyjs)
SVG svgo svgo –pretty

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.