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.
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 |
-
Install
Minify
package for Sublime Text:
a) InstallMinify
via Package Control (this is the recommended method) :
First install Package Control - see installation instructions
Then inside Sublime Text pressctrl + shift + p
(super + shift + p
on Mac OS X ) and findPackage Control: Install Package
then press Enter. You can search for theMinify
package by entering its nameMinify
b) Alternatively, you can installMinify
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. -
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 thatnode
is in yourPATH
, 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 ascommand not found
or something similar thennode
is not available via yourPATH
and you must fix this! -
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 fromTerminal
: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 outsvgo
from the above npm install command. You can also leave outuglifycss
, 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 yourPATH
, 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 ascommand not found
or something similar thencleancss
is not available via yourPATH
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
andsvgo
).
##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.
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!!
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.