前端代码的压缩
前端的js、css、html的压缩不仅会让网页加载更快一些,在移动互联网的今天省流量也成为了一大好处。
google的Closure就是一个JS压缩工具(google暂时好像没有css压缩工具),还有雅虎的 YUI Compressor 它是JS/CSS压缩工具。它们都是用java写的工具,用起来就是一行命令,类似于:
java -jar yui.jar --type css --charset utf-8 -o dest.css src.css
就酱紫。
但是用起来我总不能每改一次css、js文件就手动执行一般这个命令吧……很麻烦的。
所以有了jetbrains黑科技公司的IDE就方便很多啦。
Webstorm等系列IDE的File Watchers功能
在settings->File Watchers里设置。如图:
File Watchers是一个可以按照文件类型实时监测工程里的文件变化,并且提供回调接口的功能。比如我可以实时监测CoffeeScript文件变化,并且把它们自动地编译生成js文件。是不是很方便?
什么都不用担心,直接在html里引用js文件,然后尽情地写你的CoffeeScript吧。
附带一下CoffeeScript的File Watchers的配置方式:
那个$FileDir$和$FileName$指的是各种相对路径,具体的你可以点击Insert macro…查看,就不过多说明了(Insert macro…点击之后有详细的样例说明)
YUI Compressor压缩JS/CSS的配置:
三个红框的配置分别是:
- 下载好的jar 的路径
- $FileName$ -o $FileNameWithoutExtension$.min.js
- $FileNameWithoutExtension$.min.js
CSS文件监测的设置同理,把js改成css就行。
HTML压缩
重点来了,WebStorm好像没有直接提供HTML文件压缩的选项,但是有了<custom>
的选项我们就可以自己做一个啊。
于是昨天迫于强迫症犯了,css、js都自动压缩了,html一定也要自动压缩!所以网上找了个html压缩的代码,改了改,加了接口自己做了个插件。
github地址:https://github.com/cyhhao/HtmlCompressor
jar就在** out/artifacts/unnamed/unnamed.jar **路径,下载下来直接用就好。
用法就是
源文件路径 -o 生成文件路径
目前还很粗糙啦,只有-o命令……只支持utf-8编码……以后有时间会继续更新更新的嘛~
WebStorm配置方式:
三个红框的配置分别是(举一反三啦~):
- 下载好的jar 的路径
- $FileName$ -o $FileNameWithoutExtension$.min.html
- $FileNameWithoutExtension$.min.html
相关推荐
webstorm是非常流行的前端开发IDE 而minify html压缩html代码也是前端必备技能之一 如何让webstorm存盘html文件时,自动压缩html文件?我一步一步教你
webstorm中px转rem插件 使用说明: 1.file-settings-plugins-install plugin from disk-选择生成的jar文件-restart webstorm 2.tools-SetPX2REM设置计算的比值-选中代码段,如'100px'-后,点击shift+f 3.设置界面和...
webStorm用的chrom插件2.0.6
将其中的wecharCode.jar 下载下来,然后在webStorm 的 File -> import settings 中导入即可
JetBrains IDE Support 是一款谷歌浏览器上进行开发调试用的插件。支持HTML/CSS/JavaScript编辑和 JavaScript 调试。
WebStorm eslint 插件。下载到本地,解压缩,选择从本地安装插件,选中eslint-plugin.jar即可
如何用ChatGPT插件+Webstorm提高程序员效率
import cost 的webstorm 插件 , 用于查看 引用的包的大小
windows使用方法:file -> import settings -> ReactNative.jar
webstorm自动压缩js、css、html【工具篇】-附件资源
WebStorm 集成 ReactNative 插件,reactnative 代码提示 ReactNative的代码模板,包括: 1. 组件名称 2. Api 名称 3. 所有StyleSheets属性 4. 组件属性 [2015-12-25]新增
使用nodejs插件UglifyJS2压缩js文件
主要介绍了Webstorm2017上SVN插件安装的方法步骤,安装Webstorm2017后,要使用svn版本控制,主要介绍如何安装配置SVN,分享给大家,有需要的可以了解一下
HTML+JavaScript+CSS+WebStorm开发技巧
使用webstorm开发小程序wxml代码高亮提示。webstorm,phpstorm,intellij idea都可使用,小程序代码高亮插件
Intellij平台(WebStorm, RubyMine, Intellij等)的Vue.js支持插件
ChatGPT插件+Webstorm提高程序员效率.zip