【ツール/エディタ】Bootstrap4のNPM Scriptsでビルド済みファイルをFTPで自動的にアップロードする | Wood-Roots:blog

Bootstrap4の正式版がリリースされたので試しに使ってみました。

標準でNPM ScriptsによるSassのビルドやJavascriptの圧縮などができるのですが、ついでにできあがったファイルをFTPでアップロードできればいいなと思いできるようにしました。

以前gruntでも同じ処理を書きました。以下の記事のNPM Scripts版です。
grunt-ftpushを使って変更されたファイルをFTPで自動でアップロードする

ftp-deplayのインストール

※以下、Windows10を使用しています。

ftp-deployを使います。

Bootstrapを展開したフォルダでコマンドプロンプトを開き、以下のコマンドを入力してftp-deployのインストールを行います。

実行ファイルの作成

Bootstrapを展開したフォルダにdeploy.jsというファイルを新規作成し、以下のように書きます。

これでコマンドプロンプトで「node deploy」と入力すればローカルの「dist」フォルダ内のファイルがサーバ上の「public_html」ディレクトリにアップロードされます。

これだけでもいいですが、distフォルダ内のファイルに変更があったときに自動でアップロードするようにしてみます。

package.jsonに追記

package.jsonのscripts欄に以下のように追記します。

※ 前行の最後にカンマも追加してください。

nodemonはファイルの更新を監視し、更新があったらプロセスを再起動するスクリプトです。
Bootstrap4では標準でインストールされます。

多分Node Monitorの略だけどドラえもんみたいだ。

Node.jsのソース修正後、nodemonで自動再起動

これで、以下のコマンドを叩くとdistフォルダが監視され、内部のファイル（phpとjsとcss）が変更されると自動でアップロードされるようになります。

解決できなかった問題

sassのビルド→Javascriptの圧縮→FTPでアップロード、と全部の処理を一括でやりたかったところですが、Bootstrap4で「npm run watch」とやるとエンドレスでsassのビルド・CSSの圧縮・Javascriptの圧縮・FTPでのアップロードを繰り返し、その結果FTPの接続制限を超えてしまうという状況になりました…。
なのでCSS・JS関係の処理とFTPのアップロードは別タスクとして都度実行し直してます。

この問題はまた追って調べてみます（私のスキルで解決できるかは不明）。