JS開発ツールの話。Cmd+Opt+j や Cmd+Opt+i が手癖になってる人向け。タイトルのTincrはChrome Developer Toolsのプラグインで、ファイルシステム上の変更を検知してブラウザをリロードするのと、その逆方向であるDeveloper Tools上で加えた変更をファイルに反映してくれる。前者はyeoman serverも同じ事ができるが、後者の機能は無い。
Tincrのインストール
Chrome Developer Toolsに追加されればOK
プロジェクトの設定
Tincrに用意されているプロジェクトタイプは次の5つ。
- Ruby on Rails
- Chrome Extension
- Http Web Server
- Atlassian Plugin
- Configuration File
yeoman server だったり python -m SimpleHTTPServer でサーバー起動して動作確認をする場合はHttp ServerでOK。URL Rewriteしている場合はマッピングが必要なのでConfiguration Fileを選択して設定ファイルを書く必要がある。
試しに次のようなファイル構成の時に、ローカルでWebサーバーを起動してブラウザで開く。
--> tree app
app
├── 404.html
├── favicon.ico
├── index.html
├── robots.txt
├── scripts
│ ├── main.js
│ └── vendor
│ ├── jquery.min.js
│ └── modernizr.min.js
└── styles
└── main.css
Chrome Developer ToolsのTincrタブでProject Typeを選択、Http Serverの場合はルートディレクトリの設定のみ。
Content for url http://localhost:8000/scripts/main.js matches local file /Users/tnishibayashi/dev/test/tinkr/app/scripts/main.js Content for url http://localhost:8000/scripts/vendor/modernizr.min.js matches local file /Users/tnishibayashi/dev/test/tinkr/app/scripts/vendor/modernizr.min.js Content for url http://localhost:8000/styles/main.css matches local file /Users/tnishibayashi/dev/test/tinkr/app/styles/main.cssローカルからロードしているmain.jsとmain.css、modernizr.min.jsが見つかった事が出力される。
ファイルの修正と同期
Sourcesタブでmain.js, main.cssをおもむろに修正して保存(Cmd+s)するとページとローカルファイルの両方に反映される。Sassもそのままいける。JSファイルであればブレークポイントとの組みあわせで見つけたバグをその場で修正できる。Sourcesタブの他には、Elementsタブでタグを選択してMatched CSS Rulesに出てきたスタイルに加えた変更がファイルに反映される。もちろん同期対象のcssファイル内で定義されている物に限る。
最近のトレンドとか
今のトレンドはビルドパイプラインも使いつつ、開発中は個々のファイルを未加工のままブラウザにロードするスタイルだろう。特にTincrでは結合後のJSファイルやコンパイル後のsassを編集できてもあまり嬉しくない。ファイルが大量になってくるとロードするのも大変だけど、そこはRequire.jsあたりにまかせても良さげ。
Tincr Chrome Extension
http://tin.cr/
http://tin.cr/
