Webフロントエンド開発ツールの概要

フロントエンド開発ツール:

Web フロントエンド開発およびその他の関連開発、

私が Sublime Text と Webstorm (jetbrains 社シリーズ製品) を推奨する理由は、emmet (http://docs.emmet.io) というテクノロジーがあり、これら 2 つのサポートは次のとおりです。

sublime text は、すべてのエディターの中で emmet を適切にサポートしている唯一のエディターです。

Webstorm は、すべてのエディターの中で emmet が組み込まれている唯一のエディターであり、emmet の精神を前進させるものです。

ウェブストームはフロントエンドユーザーを対象としています。

詳細な比較: 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 ルールの変更:

パッケージ->エメット->エメット->スニペット.json

b.jetbrain の製品ラインには 1 つだけ例外があります。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

Chromeのデバッグ

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

Chromeのデバッグ

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

Chromeコンソールコマンドの詳しい説明

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 (Gecko のような KHTML) バージョン/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

ChromeアーティファクトVimiumショートカットキー学習記録

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

Chrome 開発ツール ワークスペースの使用

4. jsリファレンスマニュアル:

w3cマニュアル

5. その他の開発ツール:

初心者に推奨: editplus、vim

チーム開発:

ウェブストーム、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.gulpjs

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 別の自動パイプライン

3: jq ツール

1. 完全なオシナリファレンスマニュアル。

2. w3cschool オフライン バージョンの w3c_all.chm には、JavaScript、jquery、php、sql、html、css2.x、3.x のマニュアルが含まれています。