Web前端開發工具總結

前端開發工具：

web前端開發乃及其它的相關開發，

推薦sublime text, webstorm(jetbrains公司係列產品)這兩個的原因在於，有個技術叫emmet, http://docs.emmet.io，而這兩個對他的支持是：

sublime text 是所有編輯器裡邊支援emmet比較好的的唯一一款。

webstorm是所有編輯器裡邊唯一內建emmet的一款，並且將emmet的精神往前推動的一款。

 

webstorm針對前端er。 

他們的詳細比較： http://www.36ria.com/5884

 

一. css工具:

1. emmet http://docs.emmet.io/

a. 可以以插件的形式安裝在dreamweaver,notepad++,editplus,sublime各個編輯器上。

http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

http://www.qianduan.net/the-zen-coding-renamed-as-emmet.html

http://www.qianduan.net/zen-coding-update-to-0-7.html

http://www.qianduan.net/zen-coding-resources-to-update.html

http://www.qianduan.net/zen-coding-for-dreamweaver-plug-in-tutorial.html

emmet在sublime上的效果：

1). css ：他與其它編輯器的區別在於細節上，例如ctrl,alt+方向鍵可以修和里邊的數值

2). html 效果：

3). sublime的emmet規則修改：

packages->Emmet->emmet->snippets.json

b. 只有一個例外jetbrain公司的產品線：webstorm,phpstorm,intellij idea都是內建的，不需要安裝。

1).

寫js的效果：

2). webstorm的emmet規則修改：Files -> settings -> Live Templates

2. css壓縮辦法：

a. 透過正規五步驟替換法，適用於任何編輯器：

http://www.cnblogs.com/sky000/archive/2010/12/22/1913719.html

b. 模組化工具

二. js工具：

1. 壓縮等：

http://www.yulonghu.com/?post=5

在線壓縮

http://tools.css-js.com/

在線壓縮

http://tool.oschina.net/

工具集

2. 以emmet的方式開發js,php,jsp,java and so on。

http://www.cnblogs.com/jikey/archive/2012/03/28/2420704.html

http://www.cnblogs.com/jikey/archive/2012/06/14/2549347.html

3. firebug,chrome調試工具的使用： 

 

http://ued.taobao.org/blog/?p=5534

chrome調試

http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html

chrome的調試

https://developers.google.com/chrome-developer-tools/docs/commandline-api

chrome console 指令詳解

http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

Firebug入門指南

http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

Firebug控制台詳解

https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

chrome行動版調試

http://www.seejs.com/archives/296

【譯】Android上的遠端除錯

http://blog.jobbole.com/31178/

用Chrome開發者工具做JavaScript效能分析

http://blog.moocss.com/code-snippets/mobile-web-code-snippets/1384.html

用谷歌(Chrome)瀏覽器來當手機模擬器

http://www.cnblogs.com/xiaoyao2011/p/3447421.html

查看事件綁定

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/

綜合瀏覽器開發工具

http://ccforward.net/2013/02/firebug_console.html

關於FireBug和Chrome的控制台

http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles

http://h5dev.uc.cn/article-25-1.html

chrome profiles

http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html

Chrome神器Vimium快速鍵學習記錄 

http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/

Chrome 開發工具 Workspace 使用 

 

4. js參考手冊：

w3c手冊

5. 其它開發工具：

新手推薦：editplus，vim

團隊開發：

webstorm, phpstorm(phper), pycharm(pythoner), intellij idea(javaer).

http://note.youdao.com/share/?id=2d7ff03aeca64808fdc0f394ffb520bf&type=notebook

6. 模組化開發grunt

http://www.gruntjs.org/article/getting_started.html

入門

http://stackoverflow.com/questions/17059487/how-to-setup-grunt-in-webstorm-on-windows

擴充工具grunt

http://www.gruntjs.org/article/home.html

http://www.cnblogs.com/tugenhua0707/p/3497488.html

前端專案建置工具---Grunt

http://javascript.ruanyifeng.com/tool/grunt.html

http://www.infoq.com/cn/articles/GruntJs

http://blog.segmentfault.com/frankfang/1190000000372612

享受 Grunt

http://www.cnblogs.com/yexiaochai/p/3603389.html

http://www.cnblogs.com/yexiaochai/p/3594561.html

7. gulpjs

http://gulpjs.com

官網

http://www.tuicool.com/articles/n2Uj2y

教學

http://gratimax.github.io/search-gulp-plugins

gulp plugins

https://github.com/gulpjs/gulp

http://blog.segmentfault.com/laopopo/1190000000372547?page=1

前端建置工具gulp入門教學

http://zhuanlan.zhihu.com/TLA42/19691575

Gulp 另一種自動化管線

三：jq工具

1. oschina參考手冊大全。

2. w3c_all.chm，w3cschool離線版，包含了javascript,jquery,php,sql,html,css2.x,3.x的手冊。