【ツール/エディタ】grunt-ftpushを使って変更されたファイルをFTPで自動でアップロードする | Wood-Roots:blog

かれこれ何年も「テキストエディタで編集→FTPクライアントでアップロード」という流れでサイト制作をやってきましたが、さすがに前時代すぎると思いGruntを使いはじめました。

できることが多くあって色々やってみたいですが、まずは「編集されたファイルをアップロードする」という点だけの自動化を試してみました。

FTPでのアップロードについてはgrunt-ftp-deployを使用するケースが多いですが、grunt-ftpushというプラグインを使うと簡単に「更新したファイルのみ」をアップロードすることができます。

Gruntのプラグインページで「FTP」と検索するといろいろ出てくるので、もしかしたらftpush以外にも同じ機能のプラグインもあるかもしれません。

基本的な使い方はftp-deployとほぼ同じです。

Additionally it tries to intellectually upload only changed files.
・・・だそうです。

プラグインのインストール

※GruntやNode.jsのインストール方法についてはあちこちで情報が見つかると思いますのでググってみてください。

ファイルの更新を監視して、変更があればFTPでアップロード、という流れなのでgrunt-contrib-watchも使います。

.ftppassの作成

FTPのユーザー名、パスワードを記述した.ftppassというファイルを作成します。
キー名は何でもかまいませんが、のちほどGruntfile.js内で使用します。

Gruntfile.jsの作成

watchで変更を監視して、ファイルに変更があればftpushを実行する、という流れです。

あとはコマンドプロンプトで

と入力すれば、監視がはじまります。

私の環境では、初回だけは変更されたファイルだけでなくすべてのファイルがアップロードされました。
2度目以降は変更されたファイルのみがアップロードされるようになりました。

余談：開発環境をちょっと見直してみたい

Gruntはプログラマ向けの環境でもっと難しいものかと思っていましたが、プラグインだけで解決する処理であればそれほど迷うことなく環境を構築することが出来ました。
自動的にアップロードする、という機能だけを見れば、同種の機能を備えるIDEもあるので、どういう環境が自分に向いてるかも試しながら探してみたいと思います。