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

How to deploy node that uses Gulp to heroku

提问by Inanc Gumus

I'm using gulp and also gulp plugins like gulp-minify-css, gulp-uglify etc (that listed as npm dependencies for my application).

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

Also I don't commit npm_modules folder and public folder, where all generated files are. And I can't figure out how to build my app (I have gulp build command) after deploy and setup my server (it's already looking for public folder).

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

It seems me a bad idea to commit before upload. Maybe there are some gentle decisions... Any thoughts?

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

Forked from: How to deploy node app that uses grunt to heroku

派生自：如何将使用 grunt 的节点应用程序部署到 heroku

回答by arb

I was able to get this to work by adding this into my "package.json" file:

通过将其添加到我的“package.json”文件中，我能够使其工作：

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

The postinstallscript is run after the build pack. Check thisfor more information. The only annoying thing is that all of your dependencies have to live under "dependencies" instead of having separate "devDependencies"

该postinstall脚本在构建包之后运行。检查这个以获取更多信息。唯一令人讨厌的是，您的所有依赖项都必须存在于“依赖项”下，而不是拥有单独的“devDependencies”

I didn't need to do anything else with buildpacks or configuration. This seems like the simplest way to do it.

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

I wrote about the process I used here

我写了我在这里使用的过程

回答by krry

You can do it!

你能行的！

There were a few key measures that helped me along the way:

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

1. heroku config:set NODE_ENV=production- to set your environment to 'production'
2. heroku config:set BUILDPACK_URL=https://github.com/krry/heroku-buildpack-nodejs-gulp-bower- to enable a customised Heroku buildpack. I incorporated elements of a few to make one that worked for me.

3. A gulptask entitled heroku:productionthat performs the build tasks that need to happen on the heroku server when NODE_ENV===production. Here's mine:

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

   clean, build, and minifyare, of course separate gulptasks that do the magic gulpage

4. If your application lives in /app.js, either:

   (A) make a Procfilein the project root that contains only: web: node app.js, or

   (B) add a start script to your package.json:

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

5. And like @Zero21xxx says, put your gulp modules in your normal dependencies list in package.json, not in the devDependencies, which get overlooked by the buildpack, which runs npm install --production

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任务来完成神奇的吞咽

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

回答by lucasarruda

The easiest way I foundwas:

我找到的最简单的方法是：

1. Setup gulpon package.jsonscripts area:

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

   Heroku will run build before starting the app.

2. Include gulp on dependenciesinstead of devDevependencies, otherwise Heroku won't be able to find it.

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

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

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

2. 包括 gulp ondependencies而不是devDevependencies，否则 Heroku 将无法找到它。

There is more relevant info about it on Heroku Dev Center: Best Practices for Node.js Development

Heroku Dev Center: Best Practices for Node.js Development上有更多相关信息

回答by Konstantin Tarkus

How to deploy to Heroku (or Azure) with git-push

如何使用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);
});

Then

然后

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

See also

也可以看看

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

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

回答by Ray Kim

There's a specific startup script that Heroku provides;

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

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

note that in your gulpfile.js (gulpfile.babel.js if you es6-ifed your gulp build process), you should have a task name default which will be automatically run after the dependencies are installed via Heroku.

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

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

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

回答by Patrick_870206

I had to take a slightly different to get this working because I'm using browsersync:

我必须采取稍微不同的方式才能使其正常工作，因为我使用的是浏览器同步：

package.json

包.json

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

gulp.js

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);
});

Setting the port to be environment port is important to prevent error when deploying in Heroku. I did not need to set a postinstall script.

将端口设置为环境端口对于防止在 Heroku 中部署时出错很重要。我不需要设置安装后脚本。

回答by Anita

Heroku finds that there is a gulpfile in your project and expects there to be a heroku:productiontask(in the gulpfile). So all you need to do is register a task that matches that name:

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

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

This is enough for heroku to notreject your app.

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

回答by Matt Surabian

It's possible to piggyback any command you want over the top of npm install. Much like the linked question in your post, you can add an install directive in scripts within package.json that will run after all the node deps have been installed that does the build.

可以在 npm install 之上搭载您想要的任何命令。与您帖子中的链接问题非常相似，您可以在 package.json 中的脚本中添加一个 install 指令，该指令将在安装了执行构建的所有节点 deps 后运行。

Your main issue will be sorting out the correct relative paths for everything.

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

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

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