web-dev-qa-db-fra.com

Comment déployer un nœud utilisant Gulp sur heroku

J'utilise gulp et des plugins gulp tels que gulp-minify-css, gulp-uglify etc.

De plus, je ne valide pas les dossiers npm_modules et les dossiers publics, où se trouvent tous les fichiers générés. Et je ne sais pas comment créer mon application (j'ai la commande gulp build) après le déploiement et la configuration de mon serveur (la recherche d'un dossier public est déjà en cours).

Cela me semble une mauvaise idée de s’engager avant le téléchargement. Peut-être y a-t-il des décisions douces ... Des idées?

Source: Comment déployer une application de noeud utilisant grunt to heroku

node.jsherokugulp
47
Inanc Gumus

J'ai pu le faire fonctionner en l'ajoutant dans mon fichier "package.json":

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

Le script postinstall est exécuté après le pack de construction. Vérifiez this pour plus d'informations. Le seul inconvénient, c'est que toutes vos dépendances doivent vivre sous des "dépendances" au lieu d'avoir des "devDependencies" séparées. 

Je n'avais pas besoin de faire autre chose avec les buildpacks ou la configuration. Cela semble être le moyen le plus simple de le faire.

J'ai écrit sur le processus que j'ai utilisé ici

59
arb

Tu peux le faire!

Quelques mesures clés m'ont aidé tout au long du parcours:

  1. heroku config:set NODE_ENV=production - pour définir votre environnement sur 'production'
  2. heroku config:set BUILDPACK_URL=https://github.com/krry/heroku-buildpack-nodejs-gulp-bower - pour activer un buildpack Heroku personnalisé. J'ai incorporé des éléments de quelques-uns pour faire celui qui a fonctionné pour moi .

  3. Une tâche gulp intitulée heroku:production qui effectue les tâches de construction devant être exécutées sur le serveur heroku lors de la production de NODE_ENV ===. Voilà le mien: 

    var gulp = require('gulp')
var runSeq = require('run-sequence')

gulp.task('heroku:production', function(){
  runSeq('clean', 'build', 'minify')
})

    clean, build et minify sont, bien sûr, des tâches distinctes gulp qui effectuent le gulpage magique.

  4. Si votre application réside dans /app.js, soit:

    (A) créez un Procfile dans la racine du projet qui ne contient que: web: node app.js, ou

    (B) ajoutez un script de démarrage à votre package.json:

    "name": "gulp-node-app-name",
"version": "10.0.4",
"scripts": {
  "start": "node app.js"
},
  5. Et comme @ Zero21xxx, placez vos modules gulp dans votre liste de dépendances normale dans package.json, et non dans les devDependencies, qui sont ignorées par le buildpack, qui exécute npm install --production
15
krry

La la meilleure façon que j'ai trouvée était:

  1. Setup gulp sur la zone de scripts package.json:

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

    _ {Heroku exécutera la construction avant de lancer l'application.

  2. Inclure gulp sur dependencies au lieu de devDevependencies, sinon Heroku ne pourra pas le trouver.

Heroku Dev Center contient des informations plus pertinentes à ce sujet: Meilleures pratiques pour le développement de Node.js

11
lucasarruda

Comment déployer à Heroku (ou Azure) avec 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);
});

Ensuite

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

Voir également

6
Konstantin Tarkus

Heroku fournit un script de démarrage spécifique;

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

notez que dans votre fichier gulpfile.js (gulpfile.babel.js si vous avez configuré votre processus de construction gulp), vous devez avoir un nom de tâche par défaut qui sera automatiquement exécuté une fois les dépendances installées via Heroku.

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

5
Ray Kim

Heroku trouve qu'il y a un fichier gulp dans votre projet et s'attend à ce qu'il y ait un heroku: production task(dans le fichier gulp.) Il suffit donc d’enregistrer une tâche correspondant à ce nom:

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

Cela suffit pour que heroku not refuse votre application.

0
Anita

J'ai dû prendre une approche légèrement différente pour que cela fonctionne, car j'utilise 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);
});

Définir le port comme port d’environnement est important pour éviter les erreurs lors du déploiement dans Heroku. Je n'ai pas eu besoin de définir un script post-installation.

0
Patrick_870206