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 79K
  • Win 44K
  • OS X 26K
  • Linux 9K
May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30 Apr 29 Apr 28 Apr 27 Apr 26 Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13
Windows 9 28 22 44 52 40 57 38 33 18 45 51 40 36 50 24 26 65 37 55 50 42 20 18 49 35 52 33 42 17 30 48 49 58 44 42 18 25 34 43 36 41 51 22 26 50
OS X 2 10 6 21 21 18 24 13 17 10 22 11 27 26 20 5 10 19 21 20 17 15 12 10 20 10 16 13 16 4 6 13 16 22 14 17 7 6 19 17 15 18 26 5 6 17
Linux 1 3 3 10 12 13 10 7 3 5 7 6 7 7 10 9 2 10 9 15 12 6 4 5 11 11 10 9 10 8 7 9 5 7 7 6 9 4 7 3 9 8 1 5 1 9

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.