部署到 heroku（gulp not found 错误）

Question

我已经克隆了 meanjs 存储库并部署到 heroku，但应用程序无法运行并显示以下错误： 应用程序错误 应用程序发生错误，无法提供您的页面。如果您是应用程序所有者，请查看您的日志以了解详细信息。

检查日志，它说：

17-04-18T03:16:50.720375+00:00 app[web.1]:
2017-04-18T03:16:50.730925+00:00 app[web.1]: sh: 1: gulp: not found
2017-04-18T03:16:50.742737+00:00 app[web.1]: npm ERR! file sh
2017-04-18T03:16:50.743150+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2017-04-18T03:16:50.743568+00:00 app[web.1]: npm ERR! errno ENOENT

这是我的 package.json 文件：

{
  "name": "meanjs",
  "description": "Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js.",
  "version": "0.5.0",
  "meanjs-version": "0.5.0",
  "private": false,
  "author": "https://github.com/meanjs/mean/graphs/contributors",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/meanjs/mean.git"
  },
  "engines": {
    "node": ">=6.3.0",
    "npm": ">=3.10.8"
  },
  "scripts": {
    "update": "npm update && npm prune && bower install --allow-root && bower prune --allow-root",
    "clean": "rm -rf node_modules/ public/lib/",
    "reinstall": "npm cache clean && npm run clean && npm install",
    "start": "gulp",
    "start:prod": "gulp prod",
    "start:debug": "node-debug --web-host 0.0.0.0 server.js & gulp debug",
    "gulp": "gulp",
    "lint": "gulp lint",
    "test": "gulp test",
    "test:server": "gulp test:server",
    "test:server:watch": "gulp test:server:watch",
    "test:client": "gulp test:client",
    "test:e2e": "gulp test:e2e",
    "test:coverage": "gulp test:coverage",
    "postinstall": "bower install --allow-root && bower prune --allow-root",
    "generate-ssl-certs": "scripts/generate-ssl-certs.sh"
  },
  "dependencies": {
    "acl": "~0.4.10",
    "async": "~2.3.0",
    "body-parser": "~1.17.1",
    "bower": "~1.8.0",
    "chalk": "~1.1.3",
    "compression": "~1.6.2",
    "connect-flash": "~0.1.1",
    "connect-mongo": "~1.3.2",
    "cookie-parser": "~1.4.1",
    "crypto": "0.0.3",
    "express": "~4.15.2",
    "express-hbs": "^1.0.4",
    "express-session": "~1.15.2",
    "generate-password": "~1.3.0",
    "glob": "~7.1.1",
    "helmet": "~2.3.0",
    "jasmine-core": "~2.5.2",
    "lodash": "~4.17.4",
    "lusca": "~1.4.1",
    "method-override": "~2.3.8",
    "mocha": "~3.2.0",
    "mongoose": "~4.9.3",
    "morgan": "~1.8.1",
    "multer": "~1.3.0",
    "nodemailer": "~2.6.4",
    "owasp-password-strength-test": "~1.3.0",
    "passport": "~0.3.2",
    "passport-facebook": "~2.1.1",
    "passport-github": "~1.1.0",
    "passport-google-oauth": "~1.0.0",
    "passport-linkedin": "~1.0.0",
    "passport-local": "~1.0.0",
    "passport-paypal-openidconnect": "~0.1.1",
    "passport-twitter": "~1.0.4",
    "serve-favicon": "~2.4.2",
    "socket.io": "^1.7.3",
    "validator": "~7.0.0",
    "winston": "^2.3.1",
    "wiredep": "~4.0.0"
  },
  "devDependencies": {
    "coveralls": "~2.13.0",
    "del": "^2.2.2",
    "eslint": "~2.2.0",
    "eslint-config-airbnb": "~6.0.2",
    "gulp": "~3.9.1",
    "gulp-angular-templatecache": "~2.0.0",
    "gulp-autoprefixer": "~3.1.0",
    "gulp-concat": "~2.6.0",
    "gulp-csslint": "~1.0.0",
    "gulp-csso": "~3.0.0",
    "gulp-eslint": "~3.0.1",
    "gulp-imagemin": "~3.2.0",
    "gulp-istanbul": "~1.1.1",
    "gulp-less": "~3.3.0",
    "gulp-load-plugins": "~1.5.0",
    "gulp-mocha": "~3.0.1",
    "gulp-ng-annotate": "~2.0.0",
    "gulp-nodemon": "~2.2.1",
    "gulp-protractor": "^3.0.0",
    "gulp-refresh": "~1.1.0",
    "gulp-rename": "~1.2.2",
    "gulp-rev": "^7.1.2",
    "gulp-sass": "~3.1.0",
    "gulp-uglify": "~2.1.2",
    "gulp-util": "~3.0.7",
    "imagemin-pngquant": "~5.0.0",
    "istanbul": "~0.4.2",
    "karma": "~1.6.0",
    "karma-chrome-launcher": "~2.0.0",
    "karma-coverage": "~1.1.1",
    "karma-firefox-launcher": "~1.0.0",
    "karma-jasmine": "~1.1.0",
    "karma-ng-html2js-preprocessor": "~1.0.0",
    "karma-phantomjs-launcher": "~1.0.0",
    "phantomjs-prebuilt": "~2.1.14",
    "lcov-result-merger": "~1.2.0",
    "run-sequence": "~1.2.2",
    "semver": "~5.3.0",
    "should": "~11.2.1",
    "supertest": "~2.0.0"
  }
}

怎么了？

Answer 1

Heroku 将尝试detect the kind of application you're deploying。

为了确定如何启动您的应用，Heroku 首先查找Procfile。 如果 Node.js 应用程序不存在 Procfile，我们将尝试启动一个 通过 package.json 中的 start script 默认 web 进程。

我假设没有 Procfile 并且 Heroku 尝试运行 npm start。

您的 start 脚本只是默认的 gulp 任务，但由于未安装 gulp，因为它未在 dependencies 中列出，因此失败。

Heroku documentation about devDependencies

我们默认将NPM_CONFIG_PRODUCTION设置为true来安装 仅生产依赖项。如果你想安装 devDependencies，你可以禁用生产模式：

$ heroku config:set NPM_CONFIG_PRODUCTION=false

但是，由于您通常不希望所有开发依赖项都包含在 您的生产版本，最好只移动依赖项 您实际上需要将生产构建（bower、grunt、gulp 等）放入 dependencies.

devDependencies 应该只包含生产中根本不需要的依赖项。由于您的应用依赖于 gulp 并且可能是大多数列出的插件，因此您需要将它们移至 dependencies。

---

如Nathan in his answer 所述，如果您不想移动您的devDependencies，您可以使用poststart npm 脚本卸载devDependencies。

"scripts": {
    "poststart": "npm prune --production"
    ...
}

Answer 2

我认为比将某些构建工具放入生产部署中更清洁的解决方案是利用 npm 的 postinstall 挂钩。使用它，您可以为构建过程加载 devDependencies，然后在部署应用程序之前将其删除。在此处查看我以前的帖子：

https://stackoverflow.com/a/42237745/673882