How to deploy node that uses Gulp to heroku

一个人想着一个人 提交于 2019-11-27 00:12:24

问题


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



来源:https://stackoverflow.com/questions/24504476/how-to-deploy-node-that-uses-gulp-to-heroku

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!