gulp(あるいはnode.js)でFTP

こんにちは。どう考えてもタスクランナーに使われているけーすけです。

慣れたワークフローを変えるのって大変ですね。しかもいわゆるフロントエンドエンジニアではなくて一通り自分でやっちゃうタイプなので、なかなかワークフローが独特になってしまってるというのもあるかもしれません。

さて、他所のフロントエンジニアさんなんかが書いてらっしゃるblogを拝見すると、本番環境の適用にみなさん、gitなりrsyncなり、リッチなツールを使ってらっしゃる。

VPSなり何なりだったらそういうのでもいいのでしょうが、残念ながら格安レンタルサーバーにとりあえず置いときゃいいやーなんて仕事も結構あるもんです。

そういう場合、まあ、大体FTPを使いますね。面倒ですね。ということでせっかくタスクランナー様を使いだしたのでgulpから使えるFTPクライアントを利用してみましょう。ドキュメントを見るに、一応素のnode.jsでも使えるっぽいです。使う機会があるのかどうかは別ですが。

vinyl-ftp

インストール

npm install gulp-util vinyl-ftp

gulp-utilが入ってなかったらそれも入れてしまう（logに必要っぽい）。

なんか慣例的にみんな –save-dev を付けてるけど、わたしはpackage.jsonは自分でいじった方がすっきりする性格なのでインストール時には追記していません。

gulpfile.jsへの記述（WSKを考慮）

var gulp = require( 'gulp' );
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );

gulp.task( 'ftp', function() {

    var conn = ftp.create( {
        host:     'mywebsite.tld',
        user:     'me',
        password: 'mypass',
        parallel: 5,
        log: gutil.log
    } );

    var globs = [
        'dist/**'
    ];

    return gulp.src( globs, { base: 'dist', buffer: false } )
        .pipe( conn.newer( '/' ) )
        .pipe( conn.dest( '/' ) );

} );

distファイルの中身を新しければひたすらアップロードするだけ、という実にアレな記述。なお、githubにあるサンプルだとparallelが10だったのだけれど、安いレンタルサーバーだとどうせ弾かれるので減らしています。

不要なものがあったらglobsの中に!付きでいれて制御する。

pipeでnewerメソッドをつけておくと新しいファイルだけアップロードできる。

また、srcのbaseを（WSKの場合）忘れずにdistにしておく。でないとドキュメントルート/dist/…というようなことになるので。

ついでに、WSKでbuildしてそのままアップロードするタスク

gulp.task('deploy', function(){
 runSequence('default', 'ftp');
});

さっきのftpタスクの前にdefaultを動かしてもいいんだけど、アップロード前にローカルで確認したいとか色々あるかもしれないので分けた。どうせrunSequenceはWSK環境ならインストールされるからね。

パスワードが平文で保存される云々は、平文で色々送られるFTPを利用する以上、どうしようもないので……（調べてないのでなんともですが、暗号化通信に対応してるとは一言も書かれていないので、多分そういうことだと思われます）。