How to deploy a node that uses gulp for hero

Question

I use gulp as well as gulp plugins like gulp -minify-css, gulp -uglify etc. (which are listed as npm dependencies for my application).

Also I do not commit the npm_modules folder and the shared folder where all the generated files are. And I cannot figure out how to create my application (I have a gulp build command) after deploying and configuring my server (it is already looking for a shared folder).

It seems to me that a bad idea to commit before loading. Maybe there are gentle solutions ... Any thoughts?

Forked from: How to deploy a node application that uses grunt for heroku

Answer 1

I managed to get this to work by adding this to my "package.json" file:

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

postinstall script runs after build. See this for more information. The only thing that annoys is that all your dependencies should live under "dependencies" instead of having separate "devDependencies"

I did not need to do anything with buildpacks or configuration. This seems like the easiest way to do this.

I wrote about the process that I used here

Answer 2

Can you do it!

There were several key measures that helped me along the way:

• heroku config:set NODE_ENV=production - set the environment to "production"
• heroku config:set BUILDPACK_URL=https://github.com/krry/heroku-buildpack-nodejs-gulp-bower - enable Heroku custom package. I included several elements to make the one that worked for me .

• A gulp task is called heroku:production , which performs build tasks that must be performed on the heroku server when creating NODE_ENV ===. 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 perform the magic gulpage

• If your application is located in /app.js , either:

  (A) make a Procfile in the root of the project, which contains only: web: node app.js or

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

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

• And as @ Zero21xxx says, put your gulp modules in your regular dependency list in package.json, and not in devDependencies, which are overlooked by the buildpack view that runs npm install --production

Answer 3

The easiest way to find :

• Configuring gulp in package.json :

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

  Heroku will run the build before launching the application.

• Include gulp in dependencies instead of devDevependencies , otherwise Heroku will not be able to find it.

See Heroku Dev Center for more information: Node.js Development Guidelines

Answer 4

How to deploy to Heroku (or Azure) using 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 5

There is a special script run that Heroku provides;

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

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

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

Answer 6

Heroku detects that there is a gulpfile in your project and expects that there will be a heroku: production task (in gulpfile). So, all you have to do is register a task that matches this name:

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

This is enough to prevent the hero from rejecting your application.

Answer 7

I needed to do a little work because I use 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); }); 

Configuring a port that is an environment port is important to prevent deployment errors in Heroku. I did not need to install a postinstall script.

Answer 8

It is possible to link any command you want on top of the npm installation. Like the question related to you in your post, you can add the installation directive in the script in the .json package, which will be launched after all node depots have been installed, which makes the assembly.

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

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