Bootstrap4の正式版がリリースされたので試しに使ってみました。
標準でNPM ScriptsによるSassのビルドやJavascriptの圧縮などができるのですが、ついでにできあがったファイルをFTPでアップロードできればいいなと思いできるようにしました。
以前gruntでも同じ処理を書きました。以下の記事のNPM Scripts版です。
grunt-ftpushを使って変更されたファイルをFTPで自動でアップロードする
ADs
※以下、Windows10を使用しています。
ftp-deployを使います。
Bootstrapを展開したフォルダでコマンドプロンプトを開き、以下のコマンドを入力してftp-deployのインストールを行います。
1 |
npm install ftp-deploy |
Bootstrapを展開したフォルダにdeploy.jsというファイルを新規作成し、以下のように書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var FtpDeploy = require('ftp-deploy'); var ftpDeploy = new FtpDeploy(); var config = { username: "ユーザー名", password: "パスワード", // optional, prompted if none given host: "FTPホスト", port: 21, localRoot: __dirname + "/dist/", remoteRoot: "/public_html/", //アップロードする左記のディレクトリ include: [], exclude: ['.git', '.idea', 'tmp/*', 'build/*'] } ftpDeploy.deploy(config, function(err) { if (err) console.log(err) else console.log('finished'); }); |
これでコマンドプロンプトで「node deploy」と入力すればローカルの「dist」フォルダ内のファイルがサーバ上の「public_html」ディレクトリにアップロードされます。
これだけでもいいですが、distフォルダ内のファイルに変更があったときに自動でアップロードするようにしてみます。
package.jsonのscripts欄に以下のように追記します。
1 2 3 4 |
"watch": "npm-run-all --parallel watch-css watch-js", "watch-css": "nodemon --ignore js/ --ignore dist/ -e scss -x \"npm run css\"", "watch-js": "nodemon --ignore scss/ --ignore js/dist/ --ignore dist/ -e js -x \"npm run js\"", "deploy": "nodemon -e php,js,css -x \"node deploy\"" <--この行を追加 |
※ 前行の最後にカンマも追加してください。
nodemonはファイルの更新を監視し、更新があったらプロセスを再起動するスクリプトです。
Bootstrap4では標準でインストールされます。
多分Node Monitorの略だけどドラえもんみたいだ。
これで、以下のコマンドを叩くとdistフォルダが監視され、内部のファイル(phpとjsとcss)が変更されると自動でアップロードされるようになります。
1 |
npm run deploy |
sassのビルド→Javascriptの圧縮→FTPでアップロード、と全部の処理を一括でやりたかったところですが、Bootstrap4で「npm run watch」とやるとエンドレスでsassのビルド・CSSの圧縮・Javascriptの圧縮・FTPでのアップロードを繰り返し、その結果FTPの接続制限を超えてしまうという状況になりました…。
なのでCSS・JS関係の処理とFTPのアップロードは別タスクとして都度実行し直してます。
この問題はまた追って調べてみます(私のスキルで解決できるかは不明)。
ADs
コメントはまだありません。