這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇:將 Gulp deploy(部屬) Heroku
前言
有一段時間沒更新這個系列文章,剛好最近需要將 Gulp 環境部屬到 Heroku,所以就乾脆寫成一個文章分類在這個系列中當作番外篇吧~
環境
這邊將會使用的環境是先前所撰寫的 Gulp 範例
此外 gulpfile 我也順便更新寫法,改成 Gulp 4 推薦的方式來處理,再分支 newGulpfile,其他的部分基本上與原本的 Gulp 3.9.1 差不了多少,所以可以直接從程式碼了解即可。
Server
由於 Heroku 只是提供一個環境給我們,他並沒有伺服器,所以如果我們要將 Gulp 丟上 Heroku 的話,那麼就會需要伺服器環境,所以這邊要先安裝 Express
1 | npm install --save express morgan |
安裝完畢後再根目錄建立一個檔案叫做 serve.js
內容如下:
1 | const express = require('express'); |
package
接下來要來設置一下指令,Heroku 的預設指令是會找 npm start
,所以我們要將 script 加入 start
1 | "start": "node serve.js" |
注意這邊是使用 node 來執行剛剛建立的 serve.js
如果你有學過 NodeJS,那麼你一定會想「這樣不是只是開啟 server 而已嗎?那 Gulp 呢?」,沒有錯,接下來這邊就是重點了
如果你希望部屬上去時 Heroku 會先 build 過一次 gulp,那麼就必須在替 package 額外再增加一行指令,也就是 build
1 | "build": "gulp build --env prod" |
當然你也可以自訂一些其他的行為,這邊你可以參考 Heroku 這一篇文章
接下來只需要將目前的 Gulp 丟上 Heroku 就可以運行了,這邊我就不再示範如何新增 Heroku 以及部屬 Heroku 了。
但是這邊有一個重點,當你部屬 Heroku 之後有可能會發生以下錯誤
1 | npm ERR! Failed at the project@1.0.0 build script. |
以及以下訊息
1 | We're sorry this build is failing! You can troubleshoot common issues here: |
這個解決方式只需要在 package.json 中加入這一段就可以了
1 | "engines": { |