web-dev-qa-db-ja.com

Gulpを使用するノードをherokuにデプロイする方法

私はgulpを使用していますが、gulp-minify-css、gulp-uglifyなどのgulpプラグインも使用しています（アプリケーションのnpm依存関係としてリストされています）。

また、生成されたすべてのファイルがあるnpm_modulesフォルダーとパブリックフォルダーはコミットしません。また、サーバーを展開してセットアップした後、アプリをビルドする方法がわかりません（gulp buildコマンドがあります）（既にパブリックフォルダーを探しています）。

アップロードする前にコミットするのは悪い考えのようです。たぶんいくつかの穏やかな決定があります...何か考えはありますか？

分岐元： gruntをherokuに使用するノードアプリをデプロイする方法

node.jsherokugulp
47
Inanc Gumus

これを「package.json」ファイルに追加することで、これを機能させることができました。

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

postinstallスクリプトは、ビルドパックの後に実行されます。詳細については、 this を確認してください。唯一の迷惑なことは、すべての依存関係が個別の「devDependencies」ではなく「dependencies」の下に存在する必要があることです。

ビルドパックや構成で他に何もする必要はありませんでした。これが最も簡単な方法のようです。

私が使用したプロセスについて書いた here

59
arb

私が見つけた最も簡単な方法は：

  1. gulp on package.jsonスクリプト領域：

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

    Herokuはアプリを起動する前にビルドを実行します。

  2. dependenciesの代わりにdevDevependenciesにgulpを含めると、Herokuはそれを見つけることができません。

Heroku Dev Centerには、関連する詳細情報があります。 Node.js開発のベストプラクティス

11
lucasarruda

git-Push でHeroku（またはAzure）にデプロイする方法

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

それから

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

こちらもご覧ください

6
Konstantin Tarkus

Herokuが提供する特定の起動スクリプトがあります。

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

gulpfile.js（gulpビルドプロセスをes6-ifedした場合はgulpfile.babel.js）には、Herokuを介して依存関係がインストールされた後に自動的に実行されるタスク名のデフォルトが必要です。

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

5
Ray Kim

Herokuは、プロジェクトにgulpfileがあることを検出し、heroku：productiontask（gulpfile内）。したがって、あなたがする必要があるのは、その名前に一致するタスクを登録することだけです：

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

これでherokuがアプリをnot拒否するのに十分です。

0
Anita

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

ポートを環境ポートに設定することは、Herokuでデプロイする際のエラーを防ぐために重要です。ポストインストールスクリプトを設定する必要はありませんでした。

0
Patrick_870206