Zusammenfassung der Web-Frontend-Entwicklungstools

Front-End-Entwicklungstools:

Web-Frontend-Entwicklung und andere damit verbundene Entwicklung,

Der Grund, warum ich Sublime Text und Webstorm (Produkte der Jetbrains Company Series) empfehle, ist, dass es eine Technologie namens Emmet gibt, http://docs.emmet.io, und die Unterstützung für diese beiden ist:

Sublime Text ist der einzige unter allen Editoren, der Emmet gut unterstützt.

Webstorm ist der einzige Editor unter allen Editoren, der über integriertes Emmet verfügt, und er ist derjenige, der den Geist von Emmet vorantreibt.

Webstorm richtet sich an Front-End-Benutzer.

Ihr detaillierter Vergleich: http://www.36ria.com/5884

1. CSS-Tool:

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

a. Kann als Plug-in auf verschiedenen Editoren wie Dreamweaver, Notepad, Editplus und Sublime installiert werden.

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

Die Wirkung von Emmet auf das Erhabene:

1). Der Unterschied zu anderen Editoren liegt in den Details. Beispielsweise können die Werte innerhalb von

mit den Pfeiltasten Strg und Alt geändert werden

2). HTML-Effekt:

3). Änderung der Emmet-Regeln von Sublime:

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

b. Es gibt nur eine Ausnahme in der Produktlinie von jetbrain: Webstorm, PHPstorm und Intellij Idea sind alle integriert und erfordern keine Installation.

1).

Der Effekt des Schreibens von js:

2). Änderung der Emmet-Regel von Webstorm: Dateien -> Einstellungen ->

2. CSS-Komprimierungsmethode:

a. Durch die reguläre fünfstufige Ersetzungsmethode, anwendbar auf jeden Editor:

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

b. Modulare Werkzeuge

2. js-Tools:

1. Komprimierung usw.:

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

Online-Komprimierung

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

Online-Komprimierung

http://tool.oschina.net/

Toolset

2. Entwickeln Sie js, php, jsp, java usw. mit der Emmet-Methode.

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

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

3. Verwendung von Firebug- und Chrome-Debugging-Tools:

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

Chrome-Debugging

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

Chrome-Debugging

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

Detaillierte Erläuterung der Chrome-Konsolenbefehle

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

Erste Schritte mit Firebug

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

Detaillierte Erklärung der Firebug-Konsole

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

Debuggen der mobilen Chrome-Version

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

【Übersetzung】Remote-Debugging auf Android

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

Verwenden Sie Chrome Developer Tools, um die JavaScript-Leistung zu analysieren

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

Verwenden Sie den Google-Browser (Chrome) als Handysimulator

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

Ereignisbindung anzeigen

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

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

Integrierte Browser-Entwicklungstools

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

Über FireBug und die Chrome-Konsole

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

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

Chromprofile

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

Chrome-Artefakt Vimium-Tastenkombinations-Lernaufzeichnung

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

Nutzung des Arbeitsbereichs der Chrome-Entwicklungstools

4. js-Referenzhandbuch:

w3c-Handbuch

5. Andere Entwicklungstools:

Empfohlen für Neulinge: editplus, vim

Teamentwicklung:

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

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

6. Modulare Entwicklung von Grunzen

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

Erste Schritte

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

Erweiterungstool grunzt

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

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

Front-End-Projekterstellungstool---Grunt

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

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

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

Viel Spaß mit Grunt

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

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

7. gulpjs

http://gulpjs.com

Offizielle Website

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

Tutorial

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

Schluck-Plugins

https://github.com/gulpjs/gulp

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

Einführung in das Front-End-Building-Tool gulp

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

Gulp, eine weitere automatisierte Pipeline

Drei: JQ-Tool

1. Vollständiges Oschina-Referenzhandbuch.

2. w3c_all.chm, w3cschool Offline-Version, enthält Handbücher für Javascript, JQuery, PHP, SQL, HTML, CSS2.x, 3.x.