웹 프런트엔드 개발 도구 요약

프런트엔드 개발 도구:

웹 프론트엔드 개발 및 기타 관련 개발,

제가 sublime text와 webstorm(jetbrains사 시리즈 제품)을 추천하는 이유는 emmet, http://docs.emmet.io라는 기술이 있고, 이 둘에 대한 지원은 다음과 같습니다.

Sublime Text는 모든 에디터 중에서 emmet을 잘 지원하는 유일한 에디터입니다.

Webstorm은 모든 에디터 중 유일하게 emmet이 내장된 에디터이며, emmet의 정신을 이어나가는 에디터입니다.

webstorm은 프론트엔드를 목표로 합니다.

자세한 비교: http://www.36ria.com/5884

1. CSS 도구:

1. 에밋 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

에밋이 숭고에 미치는 영향:

1) css: 다른 편집기와 차이점은 세부 사항에 있습니다. 예를 들어 Ctrl, Alt+화살표 키는

내부의 값을 수정할 수 있습니다.

2) HTML 효과:

3) sublime의 emmet 규칙 수정:

패키지->Emmet->emmet->snippets.json

b. jetbrain 제품 라인에는 단 한 가지 예외가 있습니다. webstorm, phpstorm 및 intellij idea는 모두 내장되어 있으며 설치가 필요하지 않습니다.

1).

js 작성의 효과:

2) Webstorm의 emmet 규칙 수정: 파일 -> 라이브 템플릿

2. CSS 압축 방법:

a. 일반적인 5단계 교체 방법을 통해 모든 편집자에게 적용 가능합니다.

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

b. 모듈형 도구

2. JS 도구:

1. 압축 등:

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

온라인 압축

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

온라인 압축

http://tool.oschina.net/

도구 세트

2. emmet 메소드를 사용하여 js, php, jsp, java 등을 개발합니다.

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

크롬 디버깅

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

크롬 디버깅

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

크롬 콘솔 명령어에 대한 자세한 설명

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

Google(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) 버전/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

크롬 프로필

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

크롬 아티팩트 Vimium 단축키 학습기록

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

Chrome 개발 도구 작업공간 사용

4.js 참조 매뉴얼:

w3c 매뉴얼

5. 기타 개발 도구:

초보자에게 추천: editplus, vim

팀 개발:

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

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

6. 그런트의 모듈식 개발

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

시작하기

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

확장 도구 투덜거림

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

그런트를 즐기세요

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

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

7. 꿀꺽꿀꺽

http://gulpjs.com

공식 홈페이지

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

튜토리얼

http://gratimax.github.io/search-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. 오시나 참조 매뉴얼을 완성하세요.

2. w3c_all.chm, w3cschool 오프라인 버전에는 javascript, jquery, php, sql, html, css2.x, 3.x에 대한 매뉴얼이 포함되어 있습니다.