How to deploy node that uses Gulp to heroku

Question

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 fo

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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)

Answer 6

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.