Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

以下のことをしたいと思ったので備忘録。(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

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

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

Chromeの設定

Sassが編集できるようにします。

optionキー+コマンドキー+「I」で、デベロッパーツールを表示し、右上の以下のアイコンをクリック。

スクリーンショット 2016-01-28 13.00.58.png

「Settings」を選択

スクリーンショット 2016-01-28 13.01.17.png

「General」の「Sources」から、「Enable CSS source maps」と「Auto-reload generated CSS」をチェックします。

スクリーンショット-2016-01-28-13.02.02.png

これでSassが表示されるようになります。

スクリーンショット 2016-01-28 13.05.31.png

Sassを編集して、ローカルに保存されるようにします。

デベロッパーツールでSassをクリックします。

スクリーンショット 2016-01-28 13.07.17.png

Sassファイルが表示されたら、Controlキー+クリックでメニューを表示させ、「Add Folder workspace」をクリック
スクリーンショット-2016-01-28-13.15.57.png

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

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

次に、再度Sassファイル上でControlキー+クリックでメニューを表示させ、「Map to Network Resouce」をクリック
スクリーンショット-2016-01-28-13.17.44.png

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

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

Bracketsの設定

ローカルのファイルが上書きされたら自動的にサーバーにアップロードするようにします。

プラグインとして「eqFTP」をインストールします。

スクリーンショット 2016-01-28 13.42.04.png

インストールすると、右にこのようなアイコンが追加されますのでクリックします。

スクリーンショット 2016-01-28 13.43.00.png

歯車アイコンをクリックします。

スクリーンショット 2016-01-28 13.50.33.png

「新しい接続先」で、FTPもしくはSFTPの設定をします。

スクリーンショット 2016-01-28 13.51.54.png

「自動化」で、同期対象の「ファイル作成」をチェックします。

スクリーンショット 2016-01-28 13.53.15.png

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした