Sublime Text 3插件Minify的安装与使用(Javascript代码压缩,js压缩)

需要用到的软件

SublimeText3+Node.js

进入正题Minify的安装

打开SublimeText,快捷键ctrl+shift+p调出package control输入install package找到minify回车安装即可,安装结成功后该文档在编辑器中弹出。
在这里插入图片描述在这里插入图片描述
# 注意1(uglify-js默认只支持es5,如果要支持es6需要当前安装, ) uglify-js@3已支持es6压缩
#注意2: nodejs低版本clean-css-cli需要带版本号4.3.0, 高版本可不带

	# 未安装过minify所需组件的命令(文档命令)
	npm install -g clean-css-cli@4.3.0 uglifycss js-beautify html-minifier uglify-js minjson svgo
	# 未安装过minify所需组件的命令(改装支持es6的命令)
	# npm install -g clean-css-cli@4.3.0 uglifycss js-beautify html-minifier minjson svgo
	# npm install -g --save-dev uglify-js@github:mishoo/UglifyJS2#harmony		
	#已经安装minify所需组件的可执行下更新命令
	npm update -g clean-css-cli@4.3.0 uglifycss js-beautify html-minifier uglify-js minjson svgo
	# 注意如果已经安装了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编辑器中看到这则信息说明你已经完成了插件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上报错可能是权限问题,请输入以下命令

    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:
    如果你已经安装了上述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编写而成,一旦安装完毕即可离线使用,无需再次连网。

  • 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已经在sublime text 2和sublime text 3上测试通过,在各系统上表现良好(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)执行编译
  • 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"
	      ]
		}
	}
}

根据上面文档配置完成,重启sublimeText就可以使用快捷键进行压缩和格式化了

注意:对于es6语法的代码进行压缩会出现报错情况,请先将代码进行es6转es5处理下再进行压缩;不懂转换处理的可以参考 ES6代码转ES5教程(babel安装使用教程)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Sublime Text 3常用安装方法如下: 1. 打开Sublime Text 3,点击菜单栏中的“Preferences”(偏好设置)选项,然后选择“Package Control”(件控制器)。 2. 在弹出的窗口中,选择“Install Package”(安装件)选项。 3. 在搜索框中输入你想要安装件名称,然后点击搜索按钮。 4. 在搜索结果中选择你想要安装件,然后点击安装按钮。 5. 安装完成后,你可以在Sublime Text 3的菜单栏中找到新安装件,并使用它们来提高你的编程效率。 常用的Sublime Text 3件包括:Emmet、SublimeLinter、Git、MarkdownEditing、ColorPicker等。 ### 回答2: Sublime Text 3 是一款非常流行的文本编辑器,它的可扩展性和自定义性非常强,提供了许多强大的件功能,可以满足不同开发者的需求。在这里,我们将会介绍如何在 Sublime Text 3 中安装常用的件。 首先,我们需要使用 Package Control 这个件来管理 Sublime Text 3 的件。如果你还没有安装 Package Control 件,可以按照以下步骤进行安装: 1. 打开 Sublime Text 3 2. 按下 Ctrl + ` 或者点击 View -> Show Console 打开控制台 3. 复制以下代码粘贴到控制台中并回车: ``` import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) ``` 4. 安装完成后,重新启动 Sublime Text 3 接下来,我们可以通过 Package Control 来搜索并安装常用的件。在 Sublime Text 3 中使用 Package Control 的步骤如下: 1. 按下 Ctrl + Shift + P 或者点击 Preferences -> Package Control 打开 Package Control 菜单 2. 输入 Install Package 并回车,等待 Package Control 进行加载 3. 输入你想要搜索的件名称并回车,例如 Emmet、SublimeLinter、AutoFileName 等 完成安装后,我们可以在 Sublime Text 3 中启用或者禁用这些件。以 Emmet 件为例,启用步骤如下: 1. 按下 Ctrl + Shift + P 或者点击 Preferences -> Package Settings -> Emmet -> Settings 从 Package Settings 菜单中打开 Emmet 配置文件 2. 将 "disable": true 修改为 "disable": false 保存配置文件并关闭 通过以上步骤,我们可以轻松安装和启用常用的件,并为 Sublime Text 3 带来更强大的功能。 ### 回答3: Sublime Text3是一款通用文本编辑器,它提供了大量的件来增强其功能。下面将介绍一些SublimeText3 常用件的安装方法和简单的使用介绍。 1. Package Control Package Control是Sublime Text3 中非常流行的件管理工具。使用它可以方便的安装和升级其他件。要安装Package Control,请到该官网的页面上下载安装包。下载后,选中Sublime Text3中的视图(View)选项,点击Show Console,复制下面代码并回车: import urllib.request,os,hashlib; h = 'df21e130daba809182b4173efeb9c6ba' + '8d5e9aaf621d60aec8026aeda' + 'e880f7d0b6eda156f9214d8b' + 'ce53b7bfb922dddf699981808' + '848e8ca7d8d40e'.upper(); pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) 复制完成后,就可以开始使用Package Control了。 2. Emmet Emmet是一个为HTML、CSS、XML和XSL代码编写提供快速缩写的件。在Sublime Text3中输入HTML片段时,可以使用Emmet自动扩展。要安装Emmet,请在Package Control中查找Emmet,然后点击Install进行安装。 3. Sublime Linter Sublime Linter是一款用于检查代码错误的件。它使用多种语言检测器(例如JSHint,JSXHint,ESLint)检查代码,查找错误和警告。要安装Sublime Linter,请在Package Control中查找Sublime Linter,并点击Install进行安装。 4. Side Bar Enhancements Side Bar Enhancements是一款增强Sublime Text侧边栏功能的件。使用它可以添加更多右键菜单选项,包括打开文件夹、将文件夹添加到项目中、打开终端、重命名、删除等。要安装Side Bar Enhancements,请在Package Control中查找Side Bar Enhancements,并点击Install进行安装。 总之,Sublime Text3件的安装非常简单,使用件可以使Sublime Text3的功能得到极大的扩展。以上只是介绍了一些常用的件,还有很多其他的件也值得一试。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值