Chrome＋Sass＋Bracketsで自動でFTPしてコーディング


以下のことをしたいと思ったので備忘録。（Macユーザー）

#したいこと
1. Wordpressをローカルで開発ではなく、サーバーにアップして確認しながらコーディングしていきたい。
2. ChromeのデベロッパーツールでSassを編集し、自動でローカルに保存、そのままコンパイル、そして自動でFTPしたい。

1.は、ローカルでWordpressを構築して、最終的にDBを移行したり、とするよりも、そのままサーバーでやっちゃったほうがローンチが楽、というのがあります。レンタルサーバーのwordpress簡単インストール機能がお手軽です。

2.は、Chromeのデベロッパーツールは、修正したい箇所を、controlキー＋クリック＞検証、とすると、即座に修正したいCSSの箇所を見つけることができ、そのまま編集、保存できて、楽です。

#環境
##主に、以下で環境を作ります。
- Google Chrome
- Codekit
- Brackets

##各ツールの役割
- Chromeは表示を確認しながらSassを修正します。
- Codekitは、SassのコンパイルやMinify化を行います。
- Bracketsは、コーディング以外に、Chromeで編集、保存されたSass、そしてCodekitでコンパイルされたcss、ソースマップファイルを自動的にアップロードします。

#各ツールの設定
##Codekitの設定
###ChromeでSassが見られるようにするために、source mapの出力が必要です。
以下の設定で出力されるようにするか、
![cap01.png](https://qiita-image-store.s3.amazonaws.com/0/111072/343afd2d-eec7-de50-5f87-2ba52af7de57.png)

Compassを使っている場合は、config.rbにsourcemap = trueを追加します。

わたしはOutput Style:「Comressend」にしていて、MInify化もしています。
css、sass、source mapファイルをサーバーにアップします。

##Chromeの設定
###Sassが編集できるようにします。    
optionキー＋コマンドキー＋「I」で、デベロッパーツールを表示し、右上の以下のアイコンをクリック。     
<img width="61" alt="スクリーンショット 2016-01-28 13.00.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/f5b6de32-ccf7-e6c7-254b-80c9d68f433b.png">

「Settings」を選択  
<img width="206" alt="スクリーンショット 2016-01-28 13.01.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/0b216e6e-fa40-68e3-59f3-72ec06422115.png">      

「General」の「Sources」から、「Enable CSS source maps」と「Auto-reload generated CSS」をチェックします。  
![スクリーンショット-2016-01-28-13.02.02.png](https://qiita-image-store.s3.amazonaws.com/0/111072/4eb115ac-8d3c-06b9-74ec-1b1508fadfc1.png)    

これでSassが表示されるようになります。  
<img width="355" alt="スクリーンショット 2016-01-28 13.05.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/70707f26-59ee-e282-6a66-26d894e28604.png">      

###Sassを編集して、ローカルに保存されるようにします。
デベロッパーツールでSassをクリックします。  
<img width="358" alt="スクリーンショット 2016-01-28 13.07.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/91501fb4-2ca7-e2f1-0869-aa931e1e5902.png">    

Sassファイルが表示されたら、Controlキー＋クリックでメニューを表示させ、「Add Folder workspace」をクリック
    ![スクリーンショット-2016-01-28-13.15.57.png](https://qiita-image-store.s3.amazonaws.com/0/111072/6858a87a-9c49-9324-5c9f-914164a769b9.png)

アクセスの許可を求められるので、「許可」をクリックしてください。    

ローカルのサイトのフォルダを選択します。

次に、再度Sassファイル上でControlキー＋クリックでメニューを表示させ、「Map to Network Resouce」をクリック
![スクリーンショット-2016-01-28-13.17.44.png](https://qiita-image-store.s3.amazonaws.com/0/111072/3832c1c9-30d5-7215-eba7-a6145c7520f9.png)    

ローカルのsassファイルとマッピングさせます。

これでSassファイルを編集後、コマンドキー＋Sでローカルに保存することができます。

##Bracketsの設定
###ローカルのファイルが上書きされたら自動的にサーバーにアップロードするようにします。
プラグインとして「eqFTP」をインストールします。  
<img width="764" alt="スクリーンショット 2016-01-28 13.42.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/ea3f20e5-714f-a0aa-239f-120002b20780.png">  

インストールすると、右にこのようなアイコンが追加されますのでクリックします。  
<img width="35" alt="スクリーンショット 2016-01-28 13.43.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/f24e52d1-3ce2-3a1f-5727-61408d988398.png">  

歯車アイコンをクリックします。  
<img width="125" alt="スクリーンショット 2016-01-28 13.50.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/a23f7194-d76b-0472-3be0-4ba678cfd1ac.png">  

「新しい接続先」で、FTPもしくはSFTPの設定をします。  
<img width="237" alt="スクリーンショット 2016-01-28 13.51.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/8660cc20-3a7a-64ab-16d5-ef02974aeb67.png">        

「自動化」で、同期対象の「ファイル作成」をチェックします。  
<img width="185" alt="スクリーンショット 2016-01-28 13.53.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/111072/d614188b-1d85-09af-02e6-399812e19df9.png">


これで、Chromeでデバッグしてsassを保存すると、ローカルのファイルを上書き、Codekitがコンパイルして、BracketsがFTPしてくれます。

Compass使ってますが、minify化後のファイルを「xxx.min.css」とリネームしたいんですが、やり方わかららず、仕方がないので、Sassファイルを「 xxx.min.scss」としています。（なんだかカッコ悪い。）