saber酱的抱枕

Fly me to the moon

02/14
02:56
软件

使用 UnCSS 移除冗余的 CSS 规则

CSS 文件里出现冗余的规则是很常见的,比如我们引用了某个 UI 框架的 CSS 文件,里面包含了所有组件的样式规则。但是我们在一个页面里不可能用到所有的组件,那么用不到的规则就是冗余的,我们可以使用 NodeJS 的 UnCSS 包来去掉冗余的规则。

UnCSS GitHub 页面

首先安装 UnCSS:

npm install -g uncss

之后指定要分析的页面的 url,并设置输出的文件名:

uncss http://127.0.0.1:5500/index.html > styles.css

如上示例,UnCSS 会分析指定 url 的页面,提取所有被使用的 CSS 规则,保存到一个新的 CSS 文件里。非常快速便捷。

上面的示例是分析单个页面,我们也可以通过配置文件来让 UnCSS 批量处理多个页面。不过我还不清楚有没有分析整站的办法。

使用 UnCSS 移除冗余的 CSS 规则

05/13
18:24
软件

我在sublime text 3里安装的插件以及一些技巧

sublime text 3 插件 技巧

以前我一直使用sublime text 2作为编辑器,直到3月份换成了Brackets。关于Brackets较为常用的优秀功能,及一些使用经验,我写了个文档,可以查看这里

但我渐渐发现Brackets的缺点也不少,今天下午卸载了它,转而使用sublime text 3。sublime text 3和sublime text 2有不少地方不一样,折腾了俩小时,记录一点经验。

1.我安装的插件:

名字					快捷键							说明
———————————————————————————————————————————————————————————————————————————————————
Alignment				Ctrl+Alt+A(我改为了ctrl+\) 		使代码中的等号自动对齐
AutoFileName			-								当你引用外部文件时,自动提示路径
BracketHighlighter		-								高亮括号配对
ChineseLocalization		-								菜单中文语言包
ColorPicker				ctrl+shift+c 					调色板
ConvertToUTF8			ctrl+shift+c(改ctrl+shift+alt+c)使sublime text支持其他编码,编辑时转换为utf-8,保存时仍保存成原编码
CSS Format				-							以多种风格来格式化css代码。在edit菜单里选择这个插件的功能。
Emmet 					tab或ctrl+e						不解释
JavaScript Completions	-								JavaScript的代码提示,很全面(sublime text自带了个SublimeCodeIntel,默认启用,有代码提示,但是不全面。使用插件最好同时启用SublimeCodeIntel。
jQuery					-								jQuery的代码提示。但是和上面的代码提示插件共存。
JsFormat				ctrl+alt+f 						格式化js代码,貌似只在.js文件中有用
LiveReload				-								在浏览器中热更新本机文件。
Package Control			-								管理插件
PyV8					-								Emmet依赖的库
SideBarEnhancements		-								扩充sidebar的右键菜单功能
SublimeLinter			-								提供jshint代码检测(需要安装nodejs才能用,所以禁用了。
SublimeTmpl				ctrl+alt+h/c/j/p 				建立指定文件类型的模板
SyncedSidebarBg			-								同步侧边栏颜色为主题颜色,不然真难看
Tag						ctrl+alt+f 						html代码格式化,选中代码后按快捷键使用
TrailingSpaces			-								显示和删除文档中多余的空格和制表符,安装后在“编辑”菜单中使用它

2.我的user设置:

{
	"color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
	"font_face": "Consolas",
	"font_size": 12,
	"ignored_packages":
	[
		"SublimeLinter",
		"Vintage"
	],
	"word_wrap": "true",
	"highlight_line": true,
	"save_on_focus_lost": true,
	"show_encoding": true,
	"scroll_past_end": false
}

ignored_packages的意思是忽略插件(禁用里面的插件)。

更多user设置项可参考此处,或参考这篇文章中的中文翻译。

3.我的自定义快捷键键设置(在Preferences=>Key Bindding - User里设置):

[
    { "keys": ["ctrl+\\"],	"command":	"alignment"	},
	{ "keys": ["ctrl+shift+alt+s"], "command": "save_all" },
	{ "keys": ["ctrl+shift+c"], "command": "open_in_browser" }
]

为某个命令指定快捷键。比如sublime text 3的“保存所有打开的文件”命令没有默认快捷键,得用鼠标在下拉菜单里点击,非常麻烦,所以可以设置一个快捷键。

如果要查找所有可使用的命令,可参考此处


其他内容:

1.sublime text 3常用快捷键参考此处

2.sublime text 3的配置文件夹路径:

win7及以上:

%userprofile%\AppData\Roaming\Sublime Text 3

xp则类似于下面:

C:\Documents and Settings\Administrator\Application Data\Sublime Text 3

如果要备份插件和设置的话,只备份这里就可以了。恢复的话也是恢复到这里。

3.打开方式的问题

如果你想通过右键的“打开方式”使某种类型的文件关联到sublime text 3,但是里面找不到sublime text 3的话,可以试试手动选择其exe文件。如果还不行,修改注册表

HKEY_CURRENT_USER\Software\Classes\Applications\Sublimetext.exe\shell\open\command

的值为sublime text 3程序的路径,如修改成:

"C:\Program Files\Sublime Text 3\sublime_text.exe" "%1"

之后在打开方式中就可以找到sublime text 3了。

也可以尝试删除此项,貌似也有同样的效果(这个办法我没试过

我在sublime text 3里安装的插件以及一些技巧