這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：將 Gulp deploy(部屬) Heroku

發表於 更新於 分類於
有一段時間沒更新這個系列文章，剛好最近需要將 Gulp 環境部屬到 Heroku，所以就乾脆寫成一個文章分類在這個系列中當作番外篇吧~

前言

有一段時間沒更新這個系列文章，剛好最近需要將 Gulp 環境部屬到 Heroku，所以就乾脆寫成一個文章分類在這個系列中當作番外篇吧~

環境

這邊將會使用的環境是先前所撰寫的 Gulp 範例

gulpSample

此外 gulpfile 我也順便更新寫法，改成 Gulp 4 推薦的方式來處理，再分支 newGulpfile，其他的部分基本上與原本的 Gulp 3.9.1 差不了多少，所以可以直接從程式碼了解即可。

程式碼片段

Server

由於 Heroku 只是提供一個環境給我們，他並沒有伺服器，所以如果我們要將 Gulp 丟上 Heroku 的話，那麼就會需要伺服器環境，所以這邊要先安裝 Express

1
npm install --save express morgan

安裝完畢後再根目錄建立一個檔案叫做 serve.js 內容如下：

1
2
3
4
5
6
7
8
9
10
11
12
const express = require('express');
const logger = require('morgan');

const app = express();

app.use(logger('dev'));
app.use(express.static('public')); // 設置靜態資源目錄
app.get('/', (req, res) => {
  res.sendfile('./public/');
});

app.listen(process.env.PORT || 3000);

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
2
3
4
5
npm ERR! Failed at the project@1.0.0 build script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found

以及以下訊息

1
2
3
4
5
6
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys

Some possible problems:
- Node version not specified in package.json
  https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version

這個解決方式只需要在 package.json 中加入這一段就可以了

1
2
3
"engines": {
    "node": "11.7.0"
  }

完成品