sublime利用ClosureCompiler和YUICompressor本地壓縮

sublime利用ClosureCompiler和YUICompressor本地壓縮
發佈時間: 2013-06-07 / 分類: 工具,實踐 / 1 Comment


server端基本靠nodejs來壓縮了, 本地也可能因爲特殊需求而需要直接壓縮js/css, 不同的系統node的兼容不算好, 不好配置統一的環境, 而且有些人也用不到到node. 所以想到了利用基於java的ClosureCompiler和YUICompressor(下面簡稱CC和YUI).


寫了2個ST的build tool, 源碼:
https://github.com/kairyou/sublimeGoogleClosureCompiler
https://github.com/kairyou/SublimeYUICompressor
在ST2/ST3(Windows/Mac)下面測試通過, Linux應該也能跑.
如果有語法錯誤可以直接雙擊console面板的錯誤行, 就會跳到源文件的對應行.
直接git clone或下載到ST插件目錄就可以了.
使用時在ST的tool-build system選擇CC或YUI後, ctrl+b直接壓縮(推薦js使用CC壓縮, css使用YUI壓縮).


因爲之前用editplus和vim時, 用到了淘寶壓縮的cmd, 所以寫cmd時copy了大部分代碼, 節約了很多時間, 感謝.
開發中也遇到幾個蛋疼的問題, 花了不少功夫才解決了這些問題:
sublime的build system設計的不夠好, 如果console面板錯誤行沒輸出文件的絕對路徑, 雙擊錯誤行不會跳轉.
YUI的輸出錯誤不帶路徑, 所以需要自己再包一層cmd/bash腳本, 捕獲輸出並加上文件路徑再返回給ST.
而且YUI返回錯誤時還附帶了一堆java信息, 需要過濾掉.
另外, Windows下面cmd捕獲/修改輸出太弱了, 不得不寫個hack來存放輸出再讀取再修改. 有興趣的可以對比下SublimeYUICompressor/bin下面的cmd和sh文件就明白了.
另外Windows下面要有%JAVA_HOME%的環境變量, 如果沒有需要裝JDK, 請查看https://github.com/kairyou/JDK, 裏面有快速搭建說明.


sublime text 項目同步插件(scp)
發佈時間: 2012-12-18 / 分類: 工具,實踐 / 4 Comments


基於sublime的SimpleSync插件修改, 完善了原插件的一些缺陷, 比如: 不支持windows系統, 保存時會強制同步, 不支持快捷鍵調用, 修改配置需要重啓sublime. 
所以把源碼大部分都修改了. 原版優秀的地方也都已保留, 比如: 執行同步時使用多線程來避免UI阻塞, 同時支持本地同步和同步到server.
已增加對ST3的支持.


下面把功能列一下:
1. 把本地項目的文件同步到本地或server (比如可以用來: 同步到server端預覽, 減少不停地commit-push-pull; 或本地編輯時備份到其他文件夾等)
注: 同步本地用cp命令, 同步server用scp命令
2. 支持多文件夾, 可以把所有項目的規則寫到一起, 針對不同的文件夾執行不同的命令.
3. 支持多規則, 可以把當前編輯的文件同時推到N個server或本地文件夾.
4. 同步時的命令利用threading多線程執行, UI不會阻塞, 可以繼續操作編輯器(否則sublime執行CMD等命令會卡住, 等命令結束纔會響應)
5. + 支持windows系統 (原版只支持MacOS and Linux)
6. + 保存文件時是否自動同步, 可在配置裏設置 ("autoSync": false)
7. + 支持快捷鍵調用同步 (會自動保存當前文件, 再同步)
8. + 同步前讀取配置, 修改配置不需要重啓sublime.
簡單配置:
修改配置: Preferences > Package Settings > sublimeSimpleSync
增加快捷鍵: Preferences > Key Buildings - User, 添加一行, 比如:
{ "keys": ["alt+s"], "command": "sublime_simple_sync"},


項目地址: https://github.com/kairyou/SublimeSimpleSync


Sublime Text 新建文件的模版插件: SublimeTmpl
發佈時間: 2012-07-22 / 分類: 工具,實踐 / 22 Comments


寫了個sublime的模版插件, 項目主頁: https://github.com/kairyou/sublimeTmpl
這樣就可以新建文件時使用模版的內容了, 目前添加了html/js/css/php/python/ruby的模版. 不需新建空白文件, 再從其他文件複製內容過來了.
已增加對Sublime Text3的支持.


使用:
1. ST菜單, File-New File (SublimeTmpl), 選擇列表裏的相應菜單, 可直接使用模版新建文件.
2. 命令, cmd+shift+p, 輸入: "tmpl:", 可以找到創建文件的菜單列表.
3.快捷鍵, 默認快捷鍵見下面. 可以自己修改, 方法見"設置"部分.


默認快捷鍵:
ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt++shift+p python
安裝:
方法1. 通過 Package Control
Package Control / Install Package, 搜索"SublimeTmpl" 或 "tmpl", 安裝.
* [2012/08/01]已經通過Package Control審覈


方法2. Github
打開項目主頁, git clone到ST的Packages文件夾(\Data\Packages), 或直接把ZIP格式的下載下來解壓到Packages文件夾(文件夾名稱必須爲:SublimeTmpl).


設置:
菜單: Preferences / Packages Settings / SublimeTmpl, 可以編輯菜單/快捷鍵/新語法等等.
如果想編輯默認模版, 請到"Data\Packages\SublimeTmpl\templates"文件夾修改.


如果你想貢獻自己的package, 可以參考我這篇文章的介紹:
http://www.fantxi.com/blog/archives/how-to-submit-a-sublime-package/


新增特性:
1. 用戶自定義模板
用戶自定義的模板統一到: Packages/User/SublimeTmpl/templates, 會優先使用.
Thanks @Xu Cheng Github


2. 模板支持 ${date} 變量
settings - user裏面可以修改${date}默認的輸出格式("%Y-%m-%d %H:%M:%S"), 比如改成: "date_format" : "%Y-%m-%d"


3. 模板支持自定義 attr
settings - user裏添加:


"attr": {
    "author": "your name" ,
    "email": "[email protected]",
    "link": "http://yours.com",
    "hello": "word"
}
就能在模板中使用 ${author} ${email} ${link} ${hello} 變量
Thanks @vfasky (Blog)
4. 自定義模板路徑(讀取自定義路徑的模版文件), 比如:
"custom_path": "/Users/yourName/templates",


另外, 關於新增語言的附加說明
1. 新增SublimeTmpl裏面沒有的語言


首先請看: Packages Settings / SublimeTmpl / Settings - Default 的默認語法設置.
如果要新增語法, 請選擇: SublimeTmpl / Settings - User, 內容格式參考Settings - Default的內容, 比如新增兩個語言test和yours:


{
       "test": {"syntax": "Packages/test/test.tmLanguage"},
       "yours": {"syntax": "Packages/Yours/Yours.tmLanguage"}
}
上面的"Packages/test/test.tmLanguage"是Packages目錄內的syntax路徑, 文件必須存在纔會有效.


新增開始菜單: 可以在SublimeTmpl / Settings - Menu裏, 參照其他語法增加test和yours.
新增快捷鍵: 可以編輯:SublimeTmpl / Key Bindings User( 格式參考: SublimeTmpl / Key Bindings Default)


2. 新增Sublime的語言


這個我也沒新建過, 可以去Package Control或者github上面找個其他人添加的新語言, 參考參考.
如果沒找到別人寫好的, 可以參考如下網址, 自己做:
http://docs.sublimetext.info/en/latest/extensibility/syntaxdefs.html (官方文檔, 利用AAAPackageDev這個插件製作)
http://manual.macromates.com/en/language_grammars (textmate的doc, 和sublime大部分是相同的)
https://github.com/LearnBoost/stylus/blob/master/editors/Stylus.tmbundle/Syntaxes/Stylus.tmLanguage (別人寫好的語法, 可以和自己新建的對比)


提交插件到 sublime text packages control
發佈時間: 2012-07-22 / 分類: 工具 / No Comments


介紹下簡單的提交sublime插件到packages control的步驟:


針對新版的packages control
提交單個插件: 添加自己的插件信息到repository/文件夾裏面對應字母的文件.


更多信息參考:https://sublime.wbond.net/docs/developers
example-repository.json 是插件的例子, 裏面有一些註釋的說明, 可以針對不同的ST版本/不同的系統設置插件源.


如果自己有多個插件: 可以創建個單獨的項目, 創建個packages.json, 裏面包含多個插件的信息, 格式可以參考example-repository.json.
在channel.json加上這個packages.json的url.
可以參考下我創建的:https://raw.github.com/kairyou/sublime_packages/master/packages.json


如果json內容的releases-details使用tag來自動更新版本, 那麼push到github時需要加上tag來更新版本號.
git tag -a 1.0.1 -m 'init' #創建
git tag #查看
git push origin 1.0.1 #push tag
刪除舊的名稱爲1.0.0的tag (可選):
git push origin :refs/tags/1.0.0 # 刪除遠端
git tag -d 1.0.0 # 刪除本地


Send a pull request
修改好後, push到自己fork的分支. 接下來把自己的修改提交給packages control:
打開github上自己fork的主頁, 進入"Pull Request"(右上方有個按鈕).
github新版界面有個"Click to create a pull request for this comparison", 要點擊輸入標題和內容. 如果你做了修改, 可以看到一個表單, 輸入Pull Request的標題和內容, 然後Pull Request.
之後就等作者merge了.


如果packages control作者接受了,你的修改就可以合併到主版本里了, 然後就可以在packages control官方找列表看到你的package了.
PS: 如果此時擔心主版本修改, 要獲取最新的文件, 可以用 git pull packages_control 將主版本的修改拉到本地.


如何更新自己Fork的packages_control代碼
clone自己的fork的分支下來:
git clone [email protected]:yourName/package_control_channel.git


remote添加一個(名爲upstream)的遠程倉庫, URL使用對方的地址:
git remote add upstream [email protected]:wbond/package_control_channel.git
git remote -v # 可查看當前的遠程倉庫列表


把對方的代碼拉到本地: git fetch upstream
合併對方的代碼: git merge upstream/master
推到自己的倉庫: git push origin master
Ps: 如果放棄自己的分支(直接使用對方最新的), 也可以在自己的倉庫主頁點"Settings", 在選"Delete this repository". 然後去對方倉庫重新點fork.


舊版本的package_control添加的方法, 可以忽略下面的內容
1. 在自己創建的package文件夾內創建: packages.json, 格式參見:
http://wbond.net/sublime_packages/package_control/package_developers#Custom_packages_json_on_GitHub
或: https://raw.github.com/kairyou/SublimeTmpl/master/packages.json


2. Fork the Package Control Channel: https://github.com/wbond/package_control_channel
在GitHub上Fork這項目, 把你fork後的分支 git clone 到本地, 編輯repositories.json, 找到裏面的"repositories"(可以看到裏面已經有很多package了).
加上自己的packages.json的URL(類似上面我創建的packages.json地址). 注意, 添加時, 請按URL的字母順序排列, 不需要加URL列表的最後面.


Sublime Text 2 高亮 ru文件
發佈時間: 2012-05-24 / 分類: 工具 / No Comments


sublime 寫ruby時發現, .ru沒有高亮(.rb正常). 摸索了下, 解決了:


編輯 \Data\Packages\Ruby\Ruby.sublime-build, 搜索: fileTypes


<string>rb</string> 下面加上:
<string>ru</string>


如果已經打開了 ru 文件, 即使重啓Sublime可能也無效. 只要把當前文件另存-替換自己就OK了.


之前在這裏已經推薦過sublime text了,整體還是不錯的,但自帶的menu沒有直接插入日期時間的。插入日期時間是比較常用的功能,所以就自己寫了個插件。會python的話應該很容易了,之前也沒系統學過,所以看看sublime官方論壇,再查查python的資料,一個插件就完成了。
修改了下源碼, 現在也支持ST3了.


源碼我放在github了(地址),可以下載zip來安裝插件。如果想用git,也可以看看我前面寫的GTI的安裝和使用。


安裝和使用,源碼的readme裏面都說了,快捷鍵:
F5 : yyyy-MM-dd
alt+F5 : yyyy-MM-dd hh:mm:ss
ctrl+F5 : 星期E
之前考慮用F4的,但貌似被sublime佔用了,所以用的F5。


另外推薦安裝"Package Control",很多插件就可以在線安裝了,蠻方便的,不另外開篇,直接寫在這裏好了。


Sublime Package Control 安裝參見:http://wbond.net/sublime_packages/package_control/installation
一步一步照着來就OK了。


Package Control 配置:
因爲在線安裝,需要設置GIT/HG root, Preferences- Package settings - Control - Settings User,加上git/hg路徑,比如:
"git_binary": "D:/Git/PortableGit/bin", "hg_binary": "D:/TortoiseHg/"


然後就可以在Preferences- Package Control - install package 裏面安裝需要的插件了~ 另外推薦個package:Prefixr(css3兼容代碼補全)
發佈了0 篇原創文章 · 獲贊 6 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章