Applications

Sublime TextのSFTPはタスクランナーいらず?ファイル変更で自動アップロード

2017.10.24

sublime textでコーディング

Sublime Textのパッケージで超おすすめなのがSFTPです。
有料のパッケージですが、全ての機能を無期限で試すことができます。
本体と同じで使用中何度かに1度購入を促されます。
価格は30ドルです。
この30ドルは私的には安い!と感じます。
価格以上に工数を削減できるからです。

Sublime TextにFTP機能が追加できるSFTP

SFTPはSublime TextにFTP機能を追加できるパッケージです。
わざわざFTPソフトやSSHを使わなくてもサーバーにファイルをアップロードすることが出来ます。

SFTPとFTPとFTPSに対応しています。

Monitor File機能がヤバい

SFTPはMonitor File機能が便利すぎます。
ファイルを監視していて、変更があれば自動的にアップロードされるって機能です。

SASS+Compassの一連の作業も

SASS+Compassは便利なのですが、コンパイルしてコンパイル後サーバーにCSSをアップする手順を踏まなくてはなりません。しかし、SFTPのMonitor File機能を使えばコンパイルするだけでアップロードは自動で行えます。

セッティング
  1. Tools>Build System>Compass
  2. Tools>Save All on Buildにチェック
  3. 監視ファイルを右クリック>SFTP/FTP>Monitor Fileにチェック

あとはCommandBでビルドすれば、保存、コンパイル、サーバーへのアップロードが自動で行えます。

必要パッケージ

SFTPの他に以下のパッケージが必要だったと記憶しています。

  • Compass
  • Sass
  • SASS Build

SFTPの使い方

まず、サーバー情報を記入する設定ファイルを作成します。SFTPはプロジェクトごとにサーバー設定を行います。

サーバー設定ファイルの作成

FTP設定を行いたいプロジェクトフォルダを右クリックし
SFTP/FTP>Map to Remoteを実行すればsftp-config.jsonという設定ファイルが作成されます。

File>SFTP/FTP>Setup Serverから作成することも可能ですがこの場合はプロジェクトを選択し、sftp-config.jsonと命名する必要があります。

このファイルは絶対にサーバーにアップしないように!

接続プロトコルの設定

SFTPとFTPとFTPSに対応しておりますがFTPプロトコルは基本使用しないようにします。セキュリティー的によろしくないからです。なのでtypeはsftpかftpsを設定するようにしてください。

"type": "sftp",

サーバーの基本情報

サーバーの基本情報を設定します。ftpsを使う場合はパスワードのコメントアウトを外しパスワードを入力、ポートは必要に応じて設定します。

"host": "example.com",
"user": "username",
//"password": "password",
//"port": "22",

"remote_path": "/example/path/",

SFTP

SFTPで接続する場合は37行目あたりの下記のコメントアウトを外して設定します。~/.sshに鍵やSSH configがある想定だと思われます。

"ssh_key_file": "~/.ssh/id_rsa",

キーバインドの設定

キーバインド、いわゆるショートカットにファイルのモニターやアップロードを登録しておくと良いでしょう。なんかドリを使っていた名残で下記のように設定しています。

Sublime Text > Preferences > Key Bindingsから設定します。ユーザーファイルに下記を追加すればOKです。

{ "keys": ["command+shift+u"], "command": "sftp_upload_file" },
{ "keys": ["command+shift+m"], "command": "sftp_monitor_file" },

SFTPを使えばタスクランナーを使わなくても手軽にそれっぽく出来てしまうのがいいです。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する