【Atom】ビルドしたフォルダをRemote-ftpで自動アップロード #ATOM

概要

webpackなどのビルドツールを利用している場合など、開発と公開ディレクトリが異なる場合にRemote-ftpで自動アップロードするときの手順メモ。

ディレクトリ構成

root/
　├ dist/ (公開用ディレクトリ)
　└ dev/ (開発用ディレクトリ)

Atomでのプロジェクトフォルダの指定

Remote-ftpの仕様上、ローカル側のアップロードフォルダ指定はできないようで、必ずプロジェクトルートからのディレクトリ構成でアップされてしまいます。
そのためAtom上でプロジェクトフォルダを指定する際にrootを指定せず、distとdevをそれぞれ指定します。
手順としては、まずdevフォルダを指定してプロジェクトを開いた後、「ファイル」>「プロジェクトフォルダを追加」でdistフォルダを追加します。
順番は特に関係ない…と思いきや、実は関係あります。「dev」が上になるよう登録するか、既に登録した後の場合はドラッグして順番を変更します。

こんな構成になります。↓

ftpconfigファイルの作成

.ftpconfigはFTPの接続情報を記載するファイルです。
パッケージ > Remote FTP > Create FTP(/SFTP) Config File から作成できます。
（理由は後述）

{
    "protocol": "ftp",
    "host": "(host name)",
    "port": 21,
    "user": "(user)",
    "pass": "(pass)",
    "promptForPass": false,
    "remote": "/sites/sample/",
    "secure": false,
    "secureOptions": null,
    "connTimeout": 10000,
    "pasvTimeout": 10000,
    "keepalive": 10000,
    "watch": ["../dist/"],
    "watchTimeout": 500
}

こんな感じです。編集すべき場所はhost,user,pass,remoteと「watch」です。

watchとは

watchは監視対象を追加するための記述です。公式ドキュメントにも"./dist/stylesheet/…"という記述例があるように、ビルドツールなどが生成した監視外のディレクトリを対象に追加するために指定します。

今回distフォルダはAtomのプロジェクト内なので監視対象に入っているかと思いきや、どうやらremote-ftpは.ftpconfigファイルの設置場所を基軸とするようなので、ここで"../dist"を指定しています。
（前述のディレクトリ順序に関する理由がここに関係しているのですが、remote-ftpは1つ目のフォルダ内に設定ファイルを作るので、いちばん上のディレクトリはdevである必要があります。）

.ftpignoreの作成

/ftpignoreは対象ファイルの除外を指定するファイルです。
パッケージ > Remote FTP > Create ignore Fileから作成できます。

.ftpconfig
.ftpignore
id_rsa
.DS_Store
.git
dev/

おそらくdev/以外は最初から記述されていると思います。
dev/は開発用フォルダをアップロードしてしまわないために追記します。

接続テスト

設定は以上になります。
パッケージ > Remote FTP > Connect からサーバーへ接続したあとビルドツールでコンテンツを生成し、アップロードの状況を確認します。
うまくいかない場合は一度Atomを再起動後にお試しください。

まとめ

watchで公開フォルダを追加
ftpignoreで開発フォルダを除外

で実現できます。
watchの記述がよく分からず、ネットで調べても正解のかたちがよく分からず、だいぶ悩みました。。
Atomパッケージの動作がうまくいかないときの確認方法として、
「表示」>「開発」「デベロッパーツール」でchromeの開発者ツールが確認できますので、ここからエラーログを参照すれば原因がつかみやすくなります。