如何將使用Gulp的節點部署到heroku

Question

我正在使用gulp以及gulp-minify-css，gulp-uglify等gulp插件（我的應用程序列為npm依賴項）。

此外，我不提交npm_modules文件夾和公共文件夾，其中所有生成的文件都是。 在部署和設置我的服務器之后，我無法弄清楚如何構建我的應用程序（我有gulp構建命令）（它已經在尋找公共文件夾）。

在上傳之前提交我似乎是一個壞主意。 也許有一些溫和的決定......有什么想法嗎？

分享自： 如何部署使用grunt到heroku的節點應用程序

Answer 1

我可以通過將其添加到我的“package.json”文件中來實現此功能：

"scripts": {
  "start": "node app",
  "postinstall": "gulp default"
}

postinstall腳本在構建包之后運行。 請查看此以獲取更多信息。 唯一令人煩惱的是，所有依賴項必須存在於“依賴項”下，而不是具有單獨的“devDependencies”

我不需要對buildpacks或配置做任何其他事情。 這似乎是最簡單的方法。

我寫了關於我在這里使用的過程

Answer 2

你能行的！

有一些關鍵措施幫助了我：

1. heroku config:set NODE_ENV=production - 將您的環境設置為'生產'
2. heroku config:set BUILDPACK_URL=https://github.com/krry/heroku-buildpack-nodejs-gulp-bower - 啟用自定義的Heroku buildpack。 我加入了一些元素來制作一個適合我的元素。

3. 一gulp的任務標題heroku:production執行需要Heroku的服務器時NODE_ENV ===生產上發生的構建任務。 這是我的：

    var gulp = require('gulp') var runSeq = require('run-sequence') gulp.task('heroku:production', function(){ runSeq('clean', 'build', 'minify') }) 

   clean ， build和minify是當然的，獨立gulp那些神奇gulpage任務

4. 如果您的應用程序位於/app.js ，則：

   （A）在項目根目錄中創建一個只包含以下內容的Procfile ： web: node app.js ，或

   （B）在package.json添加一個啟動腳本：

    "name": "gulp-node-app-name", "version": "10.0.4", "scripts": { "start": "node app.js" }, 

5. 就像@ Zero21xxx所說的那樣，將你的gulp模塊放在package.json中的普通依賴列表中，而不是devDependencies中，這會被buildpack忽略，后者運行npm install --production

Answer 3

我找到的最簡單的方法是：

1. 在package.json腳本區域設置gulp ：

    "scripts": { "build": "gulp", "start": "node app.js" } 

   Heroku將在啟動應用程序之前運行構建。

2. 包括dependencies而不是devDevependencies ，否則Heroku將無法找到它。

Heroku開發中心有關於它的更多相關信息： Node.js開發的最佳實踐

Answer 4

如何使用git-push部署到Heroku（或Azure）

// gulpfile.js

var gulp = require('gulp');
var del = require('del');
var push = require('git-push');
var argv = require('minimist')(process.argv.slice(2));

gulp.task('clean', del.bind(null, ['build/*', '!build/.git'], {dot: true}));

gulp.task('build', ['clean'], function() {
  // TODO: Build website from source files into the `./build` folder
});

gulp.task('deploy', function(cb) {
  var remote = argv.production ?
    {name: 'production', url: 'https://github.com/<org>/site.com', branch: 'gh-pages'},
    {name: 'test', url: 'https://github.com/<org>/test.site.com', branch: 'gh-pages'};
  push('./build', remote, cb);
});

然后

$ gulp build --release
$ gulp deploy --production

也可以看看

• https://github.com/koistya/git-push
• https://github.com/kriasoft/react-starter-kit（tools tools/deploy.js ）

Answer 5

Heroku提供了一個特定的啟動腳本;

"scripts": {
  "start": "nodemon app.js",
  "heroku-postbuild": "gulp"
}

請注意，在你的gulpfile.js（gulpfile.babel.js，如果你認為你的gulp構建過程），你應該有一個任務名稱默認值，它將在通過Heroku安裝依賴項后自動運行。

https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps

Answer 6

Heroku發現你的項目中有一個gulpfile，並期望有一個heroku：production 任務 （在gulpfile中）。 所以你需要做的就是注冊一個與該名稱匹配的任務：

gulp.task("heroku:production", function(){
    console.log('hello'); // the task does not need to do anything.
});

這是足夠的Heroku 不拒絕你的應用程序。

Answer 7

由於我使用的是browserync，因此我必須采取稍微不同才能使其正常工作：

的package.json

  "scripts": {
    "start": "gulp serve"
  }

gulp.js

gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: './'
    },
    port: process.env.PORT || 5000
  });

  gulp.watch(['*.html', 'css/*.css', 'js/*.js', 'views/*.html', 'template/*.html', './*.html'], {cwd: 'app'}, reload);
});

將端口設置為環境端口對於防止在Heroku中部署時出錯非常重要。 我不需要設置postinstall腳本。

Answer 8

可以在npm install的頂部搭載任何你想要的命令。 與您帖子中的鏈接問題非常相似，您可以在package.json中的腳本中添加一個install指令，該指令將在安裝完所有構建的節點deps之后運行。

你的主要問題是為所有東西挑選出正確的相對路徑。

{ ... scripts:{ install: "YOUR GULP BUILD COMMAND" } ... }