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

  • 1.2.7
  • github.​com
  • github.​com
  • 10 months ago
  • 28 minutes ago
  • 4 years ago

Installs

  • Total 69K
  • Win 38K
  • OS X 23K
  • Linux 8K
Nov 23 Nov 22 Nov 21 Nov 20 Nov 19 Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6 Nov 5 Nov 4 Nov 3 Nov 2 Nov 1 Oct 31 Oct 30 Oct 29 Oct 28 Oct 27 Oct 26 Oct 25 Oct 24 Oct 23 Oct 22 Oct 21 Oct 20 Oct 19 Oct 18 Oct 17 Oct 16 Oct 15 Oct 14 Oct 13 Oct 12 Oct 11 Oct 10 Oct 9
Windows 41 55 46 36 23 39 35 52 54 72 50 26 27 45 53 58 58 63 38 32 55 72 75 58 65 40 26 59 57 63 68 49 25 28 55 57 58 59 49 24 27 51 75 31 75 40
OS X 15 23 29 24 10 12 18 25 24 26 21 12 10 24 34 31 29 27 11 10 15 25 23 23 23 10 5 21 32 30 16 28 11 11 23 28 23 33 22 9 12 19 28 22 29 28
Linux 13 19 13 10 8 8 8 14 12 5 13 2 7 5 10 13 15 14 10 6 8 12 14 7 9 10 6 15 14 9 19 8 6 7 13 14 18 10 12 3 1 13 13 10 13 14

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.