需要用到的軟件

SublimeText3+Node.js

進入正題Minify的安裝

打開SublimeText，快捷鍵ctrl+shift+p調(diào)出package control輸入install package找到minify回車安裝即可，安裝結(jié)成功后該文檔在編輯器中彈出。

# 注意（uglify-js默認只支持es5，如果要支持es6需要當前安裝） uglify-js@3已支持es6壓縮

	# 未安裝過minify所需組件的命令（文檔命令）
	npm install -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo
	# 未安裝過minify所需組件的命令（改裝支持es6的命令）
	# npm install -g clean-css-cli uglifycss js-beautify html-minifier minjson svgo
	# npm install -g --save-dev uglify-js@github:mishoo/UglifyJS2#harmony		

	#已經(jīng)安裝minify所需組件的可執(zhí)行下更新命令
	npm update -g clean-css-cli uglifycss js-beautify html-minifier uglify-js minjson svgo
	# 注意如果已經(jīng)安裝了es5的uglify-js可以通過重新配置package.json 或者 uninstall -g uglify-js再重新安裝--save-dev uglify-js@github:mishoo/UglifyJS2#harmony
	# 如果不懂移除請自行百度(或直接清空npm的根目錄全部重新安裝!!!最徹底，但代價大不推薦)
	# 附上 uglify-js文檔一份 https://www.npmjs.com/package/uglify-js-es6#harmony

Minify文檔翻譯

安裝完成后會彈出minify使用文檔，下面是文檔的翻譯

Package Control Messages
Minify
Thank you for installing `Minify’ for Sublime Text
感謝您安裝sublime text “Minify”

• You must complete the installation by installing the required

dependencies
你必須安裝minify所要求的依賴包以完成安裝

• If you see this message in your Sublime Text editor then you have

already installed the Minify package.Please proceed to step 2:
如果你在sublime text編輯器中看到這則信息說明你已經(jīng)完成了插件minify的安裝。請進行步驟2

• Install Node.js（安裝node.js）

Windows and Mac OS X users should just visit https://nodejs.org/ and click on the INSTALL button,
Linux users can download pre-compiled binary files from https://nodejs.org/download/
Windows和Mac OS X用戶只需要訪問https://nodejs.org/ 并且點擊install按鈕安裝即可,
Linux請用戶在https://nodejs.org/download/ 下載對應的預編譯二進制文件

After successful installation, please make sure that node is in your PATH, here is how to test it:
完成安裝后，請確認node.js安裝已安裝成功，你可以按如下方法測試：
Open up a shell window (Terminal on Mac OS X, CMD.exe on Windows) and issue the following command:
打開命令行（Mac OS 下的終端/windows下的cmd.exe）輸入以下命令：

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!
你會看到對應版本號。但是如果報錯，譬如command not found則說明安裝失敗，請及時修復

• 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:
如果在mac os上報錯可能是權(quán)限問題，請輸入以下命令

sudo chown -R $USER /usr/local

and then try to issue the npm install command from above again.
加上這行命令后再嘗試安裝npm If you are never going to work with e.g. SVG files then you can leave out svgofrom the above npm install command. You can also leave outuglifycss`, etc.
如果你不打算使用到svg文件，你可以不安裝svgo包，類似的，你也可以不安裝uglifycss。

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:
如果你已經(jīng)安裝了上述npm包，建議你更新到最新版本，npm包更新命令：

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, uglifyjs,html-minifier, minjson and svgo).
安裝成功將看到對應包的版本號，如果報錯請及時修復。
相同方法可以檢查cleancss、uglifycss、js-beautify、uglifyjs、html-minifier、minjson和svgo是否也安裝成功了。

What is Minify

• Minify for Sublime Text can create a minified version of a

currently open CSS, HTML, JavaScript, JSON or SVG file.
Sublime text插件minify可以輕松地幫助你壓縮CSS、HTML、JS、JSON或者svg文件

• Minify generates a new file with an altered file extension such as

.min.css, .min.html, .min.js, .min.json or .min.svg.
Minify將所要壓縮的文件進行壓縮后生成一個后綴名為imin.css、min.html、min.js、min.json、min.svg的文件

• It can be easily configured to generate .map files too for minified

CSS and JavaScript files.
你也可以輕松配置為壓縮過的css、js文件生成map文件

• 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.
相比sublime text的其他壓縮插件，minify非常輕量，僅由少于250行python編寫而成，一旦安裝完畢即可離線使用，無需再次連網(wǎng)。

• 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已經(jīng)在sublime text 2和sublime text 3上測試通過，在各系統(tǒng)上表現(xiàn)良好（Linux, Mac OS X 和 Windows）。

• Minify depends on other programs written in Node.js to do its job.

Detailed installation instructions for those dependencies are
provided above.
Minify所需的node.js依賴包的安裝指南上文已提供。

• Which 3rd party programs are used by Minify

Minify所使用的第三方程序如下：

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
在sublime text編輯器中打開一個.css或.htm或.html或.js或.json或.svg文件，你可以：

• 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, tools-----minify-----minify
• file(beautify file)執(zhí)行編譯
• c) use one of the following keyboard shortcuts: 或使用快捷鍵 ctrl + alt + m

( super + alt + m 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.
被壓縮的文件保存在同目錄下，并以.min.css的形式命名。之后，壓縮過的文件將在新窗口中被打開。

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.
快捷鍵ctrl + alt + shift + m則會生成文件名為.Beautified.css的格式化的文件，并在新窗口中打開。

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!!
請不要編輯默認文件"Settings - Default"（所有定制化的設置編輯在setting-user中）

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.
你也可以為獨立項目覆蓋默認和用戶設置，在setting心中添加minify對象即可，sublime項目文件將會包含你的特殊設置。

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

根據(jù)上面文檔配置完成，重啟sublimeText就可以使用快捷鍵進行壓縮和格式化了

注意：對于es6語法的代碼進行壓縮會出現(xiàn)報錯情況，請先將代碼進行es6轉(zhuǎn)es5處理下再進行壓縮；不懂轉(zhuǎn)換處理的可以參考 ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程)

到此這篇關(guān)于Sublime Text 3插件Minify的安裝與使用(js代碼壓縮)的文章就介紹到這了,更多相關(guān)Sublime Text 3插件Minify的安裝使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論