如何将使用 Gulp 的节点部署到 heroku

Posted 2023-03-07

【中文标题】如何将使用 Gulp 的节点部署到 heroku

【英文标题】：How to deploy node that uses Gulp to heroku

【发布时间】：2014-08-21 16:07:15

【问题描述】：

我正在使用 gulp 以及 gulp-minify-css、gulp-uglify 等 gulp 插件（列为我的应用程序的 npm 依赖项）。

我也不提交所有生成文件所在的 npm_modules 文件夹和公用文件夹。在部署和设置我的服务器（它已经在寻找公用文件夹）之后，我不知道如何构建我的应用程序（我有 gulp build 命令）。

在上传之前提交似乎是个坏主意。也许有一些温和的决定......有什么想法吗？

来自：How to deploy node app that uses grunt to heroku

【参考方案1】：

我可以通过将它添加到我的“package.json”文件中来实现它：

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

postinstall 脚本在构建包之后运行。检查this 了解更多信息。唯一烦人的是你所有的依赖项都必须存在于“依赖项”下，而不是拥有单独的“devDependencies”

我不需要对构建包或配置做任何其他事情。这似乎是最简单的方法。

我写了我使用here的过程

【讨论】：

请注意，npm 脚本在其 PATH 上使用 node_modules/.bin 运行，因此 node node_modules/.bin/gulp 可以只是 gulp

我不得不使用prestart钩子，因为heroku:config中设置的环境变量在postinstall中不可用。

如果有人遇到这个问题，那么当我在构建成功后运行heroku run gulp build 时，我的 gulp 构建任务并没有创建资产。我检查了日志，什么也没有，甚至检查了 Heroku 存储库以查看是否有任何资产，但命令正在运行，但没有创建任何内容。然而，一旦我将它添加到我的package.json，它就决定工作了。很奇怪，希望我知道为什么！

@KarlTaylor 那是因为heroku run 称为一次性 dynos，它会启动新容器，运行您的命令并杀死容器，它是完全独立的环境，未连接到您的网络 dynos

由于我的 gulpfile 只需要运行一次并退出，作为构建过程的一部分，我无需将 devDependencies 切换到 dependencies 就可以正常工作，因为我注意到有一个 ` --- --> 在 heroku 构建过程中修剪 devDependencies` 步骤！

【参考方案2】：

你可以的！

在此过程中，有一些关键措施对我有所帮助：

heroku config:set NODE_ENV=production - 将您的环境设置为“生产” heroku config:set BUILDPACK_URL=https://github.com/krry/heroku-buildpack-nodejs-gulp-bower - 启用自定义的 Heroku buildpack。我结合了一些元素来制作one that worked for me。

一个名为heroku:production 的gulp 任务执行在NODE_ENV===生产时需要在heroku 服务器上发生的构建任务。这是我的：

var gulp = require('gulp')
var runSeq = require('run-sequence')

gulp.task('heroku:production', function()
  runSeq('clean', 'build', 'minify')
)

clean、build 和 minify 当然是独立的 gulp 任务，它们执行神奇的 gulpage

如果您的应用程序位于/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"
,

就像@Zero21xxx 所说，将您的 gulp 模块放在 package.json 中的正常依赖项列表中，而不是在 devDependencies 中，这会被运行 npm install --production 的 buildpack 忽略

【参考方案3】：

我发现的最简单的方法是：

在package.json 脚本区域设置gulp：

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

Heroku 将在启动应用程序之前运行构建。

在 dependencies 上包含 gulp 而不是 devDevependencies，否则 Heroku 将无法找到它。

Heroku 开发中心有更多相关信息：Best Practices for Node.js Development

【讨论】：

build 记录在哪里？在npm scripts doc 上没看到。

查看devcenter.heroku.com/articles/…了解build的详细信息

“build”命令在我们的案例中不起作用，所以我们一直在使用“postinstall”

奇怪的事情没有记录。我只为 Heroku 尝试过“构建”。也许它只在那里工作。如果您要在其他地方部署，我建议您使用其他阶段，例如 @Tx3 正在使用的“postinstall”。

你可以设置heroku变量heroku config:set NPM_CONFIG_PRODUCTION=false，你可以将gulp留在开发依赖中。

【参考方案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/deploy.js)

【讨论】：

我遇到了一个错误，请您检查一下：***.com/questions/41462053/…

【参考方案5】：

Heroku 提供了一个特定的启动脚本；

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

请注意，在您的 gulpfile.js（gulpfile.babel.js，如果您 es6-ifed 您的 gulp 构建过程）中，您应该有一个任务名称默认值，它将在通过 Heroku 安装依赖项后自动运行。

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

【参考方案6】：

Heroku 发现您的项目中有一个 gulpfile，并希望有一个 heroku:production task（在 gulpfile 中）。因此，您需要做的就是注册一个与该名称匹配的任务：

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

这足以让 heroku 不拒绝您的应用。

【讨论】：

你有链接到讨论heroku:production的文档源吗？

【参考方案7】：

因为我使用的是浏览器同步，所以我不得不采取一些不同的措施来使其正常工作：

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 中部署时出错很重要。我不需要设置安装后脚本。

【参考方案8】：

可以在 npm install 的顶部搭载您想要的任何命令。就像您帖子中的链接问题一样，您可以在 package.json 中的脚本中添加一个 install 指令，该指令将在安装了所有执行构建的节点后运行。

您的主要问题将是为所有内容整理出正确的相对路径。

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