How to deploy node that uses Gulp to heroku

问题:

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

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).

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

回答1:

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

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

The postinstall script is run after the build pack. Check this for more information. The only annoying thing is that all of your dependencies have to live under "dependencies" instead of having separate "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

回答2:

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 gulp task entitled heroku:production that 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 minify are, of course separate gulp tasks that do the magic gulpage

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

   (A) make a Procfile in 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

回答3:

The easiest way I found was:

1. Setup gulp on package.json scripts area:

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

   Heroku will run build before starting the app.

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

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

回答4:

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

// 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)

回答5:

There's a specific startup script that Heroku provides;

"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.

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

回答6:

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

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

This is enough for heroku to not reject your app.

回答7:

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

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

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.

回答8:

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.

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

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