Node App 在 Heroku Local 上运行但在 Heroku 服务器上崩溃。使用简单的基础模板项目
Node App works on Heroku Local but crashes on Heroku server. using simple Foundation template project
我正在尝试在 Heroku 上部署基于 Yarn、Gulp 和 Node.js 的 Foundation Web 应用程序。它适用于 heroku local web 但在 Heroku 服务器上崩溃。
端口设置正确。我正在尝试删除 Browsersync 并改用 gulp-connect。在我的 gulpfile.js 中，我设置了 connectHeroku 任务，即构建后的 运行。我已经在 Heroku 的环境中设置了 yarn start 命令。
这是我的 gulp.babel.js:
'use strict';
import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import named from 'vinyl-named';
import uncss from 'uncss';
import autoprefixer from 'autoprefixer';
import gulpConnect from 'gulp-connect';
// Load all Gulp plugins into one variable
const $ = plugins();
// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);
// Load settings from config.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}
// Build the "dist" folder by running all of the below tasks
// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass, styleGuide));
gulp.task('connectHeroku', function () {
gulpConnect.server({
root: PATHS.dist,
port: process.env.PORT || PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default',gulp.series('build','connectHeroku'));
// gulp.task('default',gulp.series('build','connectHeroku'));
// gulp.task('default',
// gulp.series('build','connectHeroku'));
// gulp.task('start','node app.js');
// gulp.task('default',
// gulp.series('build', server, watch));
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}
// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}
// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}
// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}
// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
const postCssPlugins = [
// Autoprefixer
autoprefixer({ browsers: COMPATIBILITY }),
// UnCSS - Uncomment to remove unused styles in production
// PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
].filter(Boolean);
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.postcss(postCssPlugins))
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}
let webpackConfig = {
mode: (PRODUCTION ? 'production' : 'development'),
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ "@babel/preset-env" ],
compact: false
}
}
}
]
},
devtool: !PRODUCTION && 'source-map'
}
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
.pipe($.if(PRODUCTION, $.imagemin([
$.imagemin.jpegtran({ progressive: true }),
])))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}
// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: process.env.PORT || PORT, open: false
}, done);
}
// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}
我的package.json:
{
"name": "Imaginary-Symposium",
"version": "1.0.0",
"description": "Imaginary Symposium",
"main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"dependencies": {
"foundation-sites": "^6.5.3",
"jquery": "^3.2.1",
"motion-ui": "^2.0.3",
"what-input": "^5.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-connect": "^5.7.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-stylus": "^2.7.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",
"yargs": "^12.0.2"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-connect": "^5.7.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-stylus": "^2.7.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",
"yargs": "^12.0.2"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"engines": {
"node": "10.x",
"yarn": "1.16.x"
},
"private": true
}
我想在 Heroku 上部署应用程序。
相反，我得到了这个：
2019-07-07T12:35:03.000000+00:00 app[api]: Build started by user
2019-07-07T12:36:25.772475+00:00 app[api]: Deploy c66e2cec by user
2019-07-07T12:36:25.772475+00:00 app[api]: Release v32 created by user
2019-07-07T12:36:27.030070+00:00 heroku[web.1]: State changed from crashed to starting
2019-07-07T12:36:33.644558+00:00 heroku[web.1]: Starting process with command `yarn start`
2019-07-07T12:36:34.000000+00:00 app[api]: Build succeeded
2019-07-07T12:36:35.716329+00:00 app[web.1]: yarn run v1.16.0
2019-07-07T12:36:35.799780+00:00 app[web.1]: $ gulp
2019-07-07T12:36:36.286970+00:00 app[web.1]: [12:36:36] Requiring external module @babel/register
2019-07-07T12:36:36.708934+00:00 app[web.1]: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
2019-07-07T12:36:39.150637+00:00 app[web.1]: [12:36:39] Using gulpfile ~/gulpfile.babel.js
2019-07-07T12:36:39.151579+00:00 app[web.1]: [12:36:39] Starting 'default'...
2019-07-07T12:36:39.153676+00:00 app[web.1]: [12:36:39] Starting 'build'...
2019-07-07T12:36:39.154337+00:00 app[web.1]: [12:36:39] Starting 'clean'...
2019-07-07T12:36:39.163199+00:00 app[web.1]: [12:36:39] Finished 'clean' after 8.42 ms
2019-07-07T12:36:39.163542+00:00 app[web.1]: [12:36:39] Starting 'pages'...
2019-07-07T12:36:39.163731+00:00 app[web.1]: [12:36:39] Starting 'javascript'...
2019-07-07T12:36:39.163915+00:00 app[web.1]: [12:36:39] Starting 'images'...
2019-07-07T12:36:39.164097+00:00 app[web.1]: [12:36:39] Starting 'copy'...
2019-07-07T12:36:39.378140+00:00 app[web.1]: [12:36:39] Finished 'images' after 214 ms
2019-07-07T12:36:39.630308+00:00 app[web.1]: [12:36:39] Finished 'pages' after 467 ms
2019-07-07T12:36:39.664236+00:00 app[web.1]: [12:36:39] Finished 'copy' after 500 ms
2019-07-07T12:36:45.584344+00:00 app[web.1]: [12:36:45] Version: webpack 4.25.1
2019-07-07T12:36:45.584359+00:00 app[web.1]: Built at: 07/07/2019 12:36:45 PM
2019-07-07T12:36:45.584362+00:00 app[web.1]: Asset Size Chunks Chunk Names
2019-07-07T12:36:45.584364+00:00 app[web.1]: app.js 677 KiB app [emitted] app
2019-07-07T12:36:45.584365+00:00 app[web.1]: app.js.map 1.05 MiB app [emitted] app
2019-07-07T12:36:45.584366+00:00 app[web.1]: Entrypoint app = app.js app.js.map
2019-07-07T12:36:45.588167+00:00 app[web.1]: [12:36:45] Finished 'javascript' after 6.42 s
2019-07-07T12:36:45.588354+00:00 app[web.1]: [12:36:45] Starting 'sass'...
2019-07-07T12:36:47.313608+00:00 app[web.1]: [12:36:47] Finished 'sass' after 1.73 s
2019-07-07T12:36:47.313741+00:00 app[web.1]: [12:36:47] Starting 'styleGuide'...
2019-07-07T12:36:47.344145+00:00 app[web.1]: [12:36:47] Finished 'styleGuide' after 30 ms
2019-07-07T12:36:47.344291+00:00 app[web.1]: [12:36:47] Finished 'build' after 8.19 s
2019-07-07T12:36:47.344423+00:00 app[web.1]: [12:36:47] Starting 'connectHeroku'...
2019-07-07T12:36:47.345546+00:00 app[web.1]: [12:36:47] Starting server...
2019-07-07T12:36:47.353434+00:00 app[web.1]: [12:36:47] Server started http://localhost:6186
2019-07-07T12:36:47.353712+00:00 app[web.1]: [12:36:47] Running server
2019-07-07T12:37:34.179753+00:00 heroku[web.1]: State changed from starting to crashed
2019-07-07T12:37:34.252667+00:00 heroku[web.1]: State changed from crashed to starting
2019-07-07T12:37:34.069250+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-07-07T12:37:34.069434+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-07-07T12:37:34.164632+00:00 heroku[web.1]: Process exited with status 137
2019-07-07T12:37:39.890453+00:00 heroku[web.1]: Starting process with command `yarn start`
2019-07-07T12:37:42.525193+00:00 app[web.1]: yarn run v1.16.0
2019-07-07T12:37:42.605985+00:00 app[web.1]: $ gulp
2019-07-07T12:37:43.171985+00:00 app[web.1]: [12:37:43] Requiring external module @babel/register
2019-07-07T12:37:43.571081+00:00 app[web.1]: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
2019-07-07T12:37:45.999600+00:00 app[web.1]: [12:37:45] Using gulpfile ~/gulpfile.babel.js
2019-07-07T12:37:46.000576+00:00 app[web.1]: [12:37:46] Starting 'default'...
2019-07-07T12:37:46.002883+00:00 app[web.1]: [12:37:46] Starting 'build'...
2019-07-07T12:37:46.003508+00:00 app[web.1]: [12:37:46] Starting 'clean'...
2019-07-07T12:37:46.011249+00:00 app[web.1]: [12:37:46] Finished 'clean' after 7.45 ms
2019-07-07T12:37:46.011592+00:00 app[web.1]: [12:37:46] Starting 'pages'...
2019-07-07T12:37:46.011777+00:00 app[web.1]: [12:37:46] Starting 'javascript'...
2019-07-07T12:37:46.011956+00:00 app[web.1]: [12:37:46] Starting 'images'...
2019-07-07T12:37:46.012134+00:00 app[web.1]: [12:37:46] Starting 'copy'...
2019-07-07T12:37:46.222874+00:00 app[web.1]: [12:37:46] Finished 'images' after 211 ms
2019-07-07T12:37:46.502195+00:00 app[web.1]: [12:37:46] Finished 'pages' after 490 ms
2019-07-07T12:37:46.514761+00:00 app[web.1]: [12:37:46] Finished 'copy' after 503 ms
2019-07-07T12:37:53.917049+00:00 app[web.1]: [12:37:53] Version: webpack 4.25.1
2019-07-07T12:37:53.917059+00:00 app[web.1]: Built at: 07/07/2019 12:37:53 PM
2019-07-07T12:37:53.917062+00:00 app[web.1]: Asset Size Chunks Chunk Names
2019-07-07T12:37:53.917064+00:00 app[web.1]: app.js 677 KiB app [emitted] app
2019-07-07T12:37:53.917065+00:00 app[web.1]: app.js.map 1.05 MiB app [emitted] app
2019-07-07T12:37:53.917066+00:00 app[web.1]: Entrypoint app = app.js app.js.map
2019-07-07T12:37:53.923691+00:00 app[web.1]: [12:37:53] Finished 'javascript' after 7.91 s
2019-07-07T12:37:53.923957+00:00 app[web.1]: [12:37:53] Starting 'sass'...
2019-07-07T12:37:55.730383+00:00 app[web.1]: [12:37:55] Finished 'sass' after 1.81 s
2019-07-07T12:37:55.730560+00:00 app[web.1]: [12:37:55] Starting 'styleGuide'...
2019-07-07T12:37:55.764813+00:00 app[web.1]: [12:37:55] Finished 'styleGuide' after 34 ms
2019-07-07T12:37:55.764969+00:00 app[web.1]: [12:37:55] Finished 'build' after 9.76 s
2019-07-07T12:37:55.765114+00:00 app[web.1]: [12:37:55] Starting 'connectHeroku'...
2019-07-07T12:37:55.766393+00:00 app[web.1]: [12:37:55] Starting server...
2019-07-07T12:37:55.777651+00:00 app[web.1]: [12:37:55] Server started http://localhost:10590
2019-07-07T12:37:55.778034+00:00 app[web.1]: [12:37:55] Running server
2019-07-07T12:38:39.995481+00:00 heroku[web.1]: State changed from starting to crashed
2019-07-07T12:38:39.903593+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-07-07T12:38:39.903593+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-07-07T12:38:39.980831+00:00 heroku[web.1]: Process exited with status 137
好的，这就是我设法做到的并且它起作用了（请注意我对此很陌生）：
Stack：Zurb Foundation 模板 (zurb foundation)，它使用 yarn 和 gulp 进行数据包管理和构建。输出到名为 dist 的文件夹（在 config.yml 中可更改）；表达; NodeJS.
Code follows after the steps.
- 使用@Chris 上面关于使用 Expressjs 的评论 (expressjs.com) 非常感谢@Chris！
- 在我的根文件夹中创建了一个文件 server.js；
- 添加了以下代码（见下方 server.js 的清单）（在阅读文档并点击以下两个链接后：HelloDimitri on Heroku stack; Zurb Foundation deployment on Heroku；
- 不得不重新配置我的 server.js 因为 expressjs 所需的路径必须根据我的项目；
- 在我的根文件夹中为 Heroku 创建了一个 procfile 以使用 yarn 而不是 npm（如果没有配置文件则使用 npm）；
- 更新了我的 gulpfile.babel.js 以简单地构建应用程序而不启动任何服务器；
- 更新了我的 package.json 并在依赖项中添加了 expressjs；
- 更新了我的 package.json 并添加了节点的启动脚本以根据 server.js;
启动服务器
- 毕竟，我在本地 运行
yarn start 一切顺利；
- 将更改推送到我的 GitHub 存储库并部署在 Heroku 上。
就是这样。
我希望这对遇到同样问题的人有所帮助。非常感谢@Chris。
干杯。
package.json 脚本：
"scripts": {
"start": "gulp && node server.js",
"build": "gulp build --production" }
package.json 依赖项（我和 devDependencies 一样。仍然不知道在 Heroku 上构建是否需要它们。一旦我发现就会更新。）：
"dependencies": {
"express": "^4.14.1",
"foundation-sites": "^6.5.3",
"jquery": "^3.2.1",
"motion-ui": "^2.0.3",
"what-input": "^5.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-connect": "^5.7.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-stylus": "^2.7.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",
"yargs": "^12.0.2"
}
gulpfile.babel.js
gulp.task('default',gulp.series('build'));
简介
web: yarn start
server.js代码：
// server.js
var express = require('express')
var app = express()
app.set('port', (process.env.PORT || 5000))
app.use(express.static('dist',{
index: false,
immutable: true,
cacheControl: true,
maxAge: "30d"
}));
// app.use('/bower_components', express.static(__dirname + '/bower_components'))
console.log("dirname "+__dirname)
app.get('/', function(request, response) {
console.log('request: '+request)
response.sendFile(__dirname+'/dist/index.html')
})
app.listen(app.get('port'), function() {
console.log("Node app is running at localhost:" + app.get('port'))
})
我正在尝试在 Heroku 上部署基于 Yarn、Gulp 和 Node.js 的 Foundation Web 应用程序。它适用于 heroku local web 但在 Heroku 服务器上崩溃。
端口设置正确。我正在尝试删除 Browsersync 并改用 gulp-connect。在我的 gulpfile.js 中，我设置了 connectHeroku 任务，即构建后的 运行。我已经在 Heroku 的环境中设置了 yarn start 命令。
这是我的 gulp.babel.js:
'use strict';
import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import panini from 'panini';
import rimraf from 'rimraf';
import sherpa from 'style-sherpa';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import named from 'vinyl-named';
import uncss from 'uncss';
import autoprefixer from 'autoprefixer';
import gulpConnect from 'gulp-connect';
// Load all Gulp plugins into one variable
const $ = plugins();
// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);
// Load settings from config.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();
function loadConfig() {
let ymlFile = fs.readFileSync('config.yml', 'utf8');
return yaml.load(ymlFile);
}
// Build the "dist" folder by running all of the below tasks
// Sass must be run later so UnCSS can search for used classes in the others assets.
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, javascript, images, copy), sass, styleGuide));
gulp.task('connectHeroku', function () {
gulpConnect.server({
root: PATHS.dist,
port: process.env.PORT || PORT
});
});
// Build the site, run the server, and watch for file changes
gulp.task('default',gulp.series('build','connectHeroku'));
// gulp.task('default',gulp.series('build','connectHeroku'));
// gulp.task('default',
// gulp.series('build','connectHeroku'));
// gulp.task('start','node app.js');
// gulp.task('default',
// gulp.series('build', server, watch));
// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
rimraf(PATHS.dist, done);
}
// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}
// Copy page templates into finished HTML files
function pages() {
return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
data: 'src/data/',
helpers: 'src/helpers/'
}))
.pipe(gulp.dest(PATHS.dist));
}
// Load updated HTML templates and partials into Panini
function resetPages(done) {
panini.refresh();
done();
}
// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
sherpa('src/styleguide/index.md', {
output: PATHS.dist + '/styleguide.html',
template: 'src/styleguide/template.html'
}, done);
}
// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
const postCssPlugins = [
// Autoprefixer
autoprefixer({ browsers: COMPATIBILITY }),
// UnCSS - Uncomment to remove unused styles in production
// PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
].filter(Boolean);
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.postcss(postCssPlugins))
.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));
}
let webpackConfig = {
mode: (PRODUCTION ? 'production' : 'development'),
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [ "@babel/preset-env" ],
compact: false
}
}
}
]
},
devtool: !PRODUCTION && 'source-map'
}
// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
return gulp.src(PATHS.entries)
.pipe(named())
.pipe($.sourcemaps.init())
.pipe(webpackStream(webpackConfig, webpack2))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
return gulp.src('src/assets/img/**/*')
.pipe($.if(PRODUCTION, $.imagemin([
$.imagemin.jpegtran({ progressive: true }),
])))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}
// Start a server with BrowserSync to preview the site in
function server(done) {
browser.init({
server: PATHS.dist, port: process.env.PORT || PORT, open: false
}, done);
}
// Reload the browser with BrowserSync
function reload(done) {
browser.reload();
done();
}
// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}
我的package.json:
{
"name": "Imaginary-Symposium",
"version": "1.0.0",
"description": "Imaginary Symposium",
"main": "gulpfile.babel.js",
"scripts": {
"start": "gulp",
"build": "gulp build --production"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"dependencies": {
"foundation-sites": "^6.5.3",
"jquery": "^3.2.1",
"motion-ui": "^2.0.3",
"what-input": "^5.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-connect": "^5.7.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-stylus": "^2.7.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",
"yargs": "^12.0.2"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-connect": "^5.7.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-stylus": "^2.7.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",
"yargs": "^12.0.2"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-zurb-template.git"
},
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"engines": {
"node": "10.x",
"yarn": "1.16.x"
},
"private": true
}
我想在 Heroku 上部署应用程序。
相反，我得到了这个：
2019-07-07T12:35:03.000000+00:00 app[api]: Build started by user
2019-07-07T12:36:25.772475+00:00 app[api]: Deploy c66e2cec by user
2019-07-07T12:36:25.772475+00:00 app[api]: Release v32 created by user
2019-07-07T12:36:27.030070+00:00 heroku[web.1]: State changed from crashed to starting
2019-07-07T12:36:33.644558+00:00 heroku[web.1]: Starting process with command `yarn start`
2019-07-07T12:36:34.000000+00:00 app[api]: Build succeeded
2019-07-07T12:36:35.716329+00:00 app[web.1]: yarn run v1.16.0
2019-07-07T12:36:35.799780+00:00 app[web.1]: $ gulp
2019-07-07T12:36:36.286970+00:00 app[web.1]: [12:36:36] Requiring external module @babel/register
2019-07-07T12:36:36.708934+00:00 app[web.1]: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
2019-07-07T12:36:39.150637+00:00 app[web.1]: [12:36:39] Using gulpfile ~/gulpfile.babel.js
2019-07-07T12:36:39.151579+00:00 app[web.1]: [12:36:39] Starting 'default'...
2019-07-07T12:36:39.153676+00:00 app[web.1]: [12:36:39] Starting 'build'...
2019-07-07T12:36:39.154337+00:00 app[web.1]: [12:36:39] Starting 'clean'...
2019-07-07T12:36:39.163199+00:00 app[web.1]: [12:36:39] Finished 'clean' after 8.42 ms
2019-07-07T12:36:39.163542+00:00 app[web.1]: [12:36:39] Starting 'pages'...
2019-07-07T12:36:39.163731+00:00 app[web.1]: [12:36:39] Starting 'javascript'...
2019-07-07T12:36:39.163915+00:00 app[web.1]: [12:36:39] Starting 'images'...
2019-07-07T12:36:39.164097+00:00 app[web.1]: [12:36:39] Starting 'copy'...
2019-07-07T12:36:39.378140+00:00 app[web.1]: [12:36:39] Finished 'images' after 214 ms
2019-07-07T12:36:39.630308+00:00 app[web.1]: [12:36:39] Finished 'pages' after 467 ms
2019-07-07T12:36:39.664236+00:00 app[web.1]: [12:36:39] Finished 'copy' after 500 ms
2019-07-07T12:36:45.584344+00:00 app[web.1]: [12:36:45] Version: webpack 4.25.1
2019-07-07T12:36:45.584359+00:00 app[web.1]: Built at: 07/07/2019 12:36:45 PM
2019-07-07T12:36:45.584362+00:00 app[web.1]: Asset Size Chunks Chunk Names
2019-07-07T12:36:45.584364+00:00 app[web.1]: app.js 677 KiB app [emitted] app
2019-07-07T12:36:45.584365+00:00 app[web.1]: app.js.map 1.05 MiB app [emitted] app
2019-07-07T12:36:45.584366+00:00 app[web.1]: Entrypoint app = app.js app.js.map
2019-07-07T12:36:45.588167+00:00 app[web.1]: [12:36:45] Finished 'javascript' after 6.42 s
2019-07-07T12:36:45.588354+00:00 app[web.1]: [12:36:45] Starting 'sass'...
2019-07-07T12:36:47.313608+00:00 app[web.1]: [12:36:47] Finished 'sass' after 1.73 s
2019-07-07T12:36:47.313741+00:00 app[web.1]: [12:36:47] Starting 'styleGuide'...
2019-07-07T12:36:47.344145+00:00 app[web.1]: [12:36:47] Finished 'styleGuide' after 30 ms
2019-07-07T12:36:47.344291+00:00 app[web.1]: [12:36:47] Finished 'build' after 8.19 s
2019-07-07T12:36:47.344423+00:00 app[web.1]: [12:36:47] Starting 'connectHeroku'...
2019-07-07T12:36:47.345546+00:00 app[web.1]: [12:36:47] Starting server...
2019-07-07T12:36:47.353434+00:00 app[web.1]: [12:36:47] Server started http://localhost:6186
2019-07-07T12:36:47.353712+00:00 app[web.1]: [12:36:47] Running server
2019-07-07T12:37:34.179753+00:00 heroku[web.1]: State changed from starting to crashed
2019-07-07T12:37:34.252667+00:00 heroku[web.1]: State changed from crashed to starting
2019-07-07T12:37:34.069250+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-07-07T12:37:34.069434+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-07-07T12:37:34.164632+00:00 heroku[web.1]: Process exited with status 137
2019-07-07T12:37:39.890453+00:00 heroku[web.1]: Starting process with command `yarn start`
2019-07-07T12:37:42.525193+00:00 app[web.1]: yarn run v1.16.0
2019-07-07T12:37:42.605985+00:00 app[web.1]: $ gulp
2019-07-07T12:37:43.171985+00:00 app[web.1]: [12:37:43] Requiring external module @babel/register
2019-07-07T12:37:43.571081+00:00 app[web.1]: Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
2019-07-07T12:37:45.999600+00:00 app[web.1]: [12:37:45] Using gulpfile ~/gulpfile.babel.js
2019-07-07T12:37:46.000576+00:00 app[web.1]: [12:37:46] Starting 'default'...
2019-07-07T12:37:46.002883+00:00 app[web.1]: [12:37:46] Starting 'build'...
2019-07-07T12:37:46.003508+00:00 app[web.1]: [12:37:46] Starting 'clean'...
2019-07-07T12:37:46.011249+00:00 app[web.1]: [12:37:46] Finished 'clean' after 7.45 ms
2019-07-07T12:37:46.011592+00:00 app[web.1]: [12:37:46] Starting 'pages'...
2019-07-07T12:37:46.011777+00:00 app[web.1]: [12:37:46] Starting 'javascript'...
2019-07-07T12:37:46.011956+00:00 app[web.1]: [12:37:46] Starting 'images'...
2019-07-07T12:37:46.012134+00:00 app[web.1]: [12:37:46] Starting 'copy'...
2019-07-07T12:37:46.222874+00:00 app[web.1]: [12:37:46] Finished 'images' after 211 ms
2019-07-07T12:37:46.502195+00:00 app[web.1]: [12:37:46] Finished 'pages' after 490 ms
2019-07-07T12:37:46.514761+00:00 app[web.1]: [12:37:46] Finished 'copy' after 503 ms
2019-07-07T12:37:53.917049+00:00 app[web.1]: [12:37:53] Version: webpack 4.25.1
2019-07-07T12:37:53.917059+00:00 app[web.1]: Built at: 07/07/2019 12:37:53 PM
2019-07-07T12:37:53.917062+00:00 app[web.1]: Asset Size Chunks Chunk Names
2019-07-07T12:37:53.917064+00:00 app[web.1]: app.js 677 KiB app [emitted] app
2019-07-07T12:37:53.917065+00:00 app[web.1]: app.js.map 1.05 MiB app [emitted] app
2019-07-07T12:37:53.917066+00:00 app[web.1]: Entrypoint app = app.js app.js.map
2019-07-07T12:37:53.923691+00:00 app[web.1]: [12:37:53] Finished 'javascript' after 7.91 s
2019-07-07T12:37:53.923957+00:00 app[web.1]: [12:37:53] Starting 'sass'...
2019-07-07T12:37:55.730383+00:00 app[web.1]: [12:37:55] Finished 'sass' after 1.81 s
2019-07-07T12:37:55.730560+00:00 app[web.1]: [12:37:55] Starting 'styleGuide'...
2019-07-07T12:37:55.764813+00:00 app[web.1]: [12:37:55] Finished 'styleGuide' after 34 ms
2019-07-07T12:37:55.764969+00:00 app[web.1]: [12:37:55] Finished 'build' after 9.76 s
2019-07-07T12:37:55.765114+00:00 app[web.1]: [12:37:55] Starting 'connectHeroku'...
2019-07-07T12:37:55.766393+00:00 app[web.1]: [12:37:55] Starting server...
2019-07-07T12:37:55.777651+00:00 app[web.1]: [12:37:55] Server started http://localhost:10590
2019-07-07T12:37:55.778034+00:00 app[web.1]: [12:37:55] Running server
2019-07-07T12:38:39.995481+00:00 heroku[web.1]: State changed from starting to crashed
2019-07-07T12:38:39.903593+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2019-07-07T12:38:39.903593+00:00 heroku[web.1]: Stopping process with SIGKILL
2019-07-07T12:38:39.980831+00:00 heroku[web.1]: Process exited with status 137
好的，这就是我设法做到的并且它起作用了（请注意我对此很陌生）： Stack：Zurb Foundation 模板 (zurb foundation)，它使用 yarn 和 gulp 进行数据包管理和构建。输出到名为 dist 的文件夹（在 config.yml 中可更改）；表达; NodeJS.
Code follows after the steps.
- 使用@Chris 上面关于使用 Expressjs 的评论 (expressjs.com) 非常感谢@Chris！
- 在我的根文件夹中创建了一个文件 server.js；
- 添加了以下代码（见下方 server.js 的清单）（在阅读文档并点击以下两个链接后：HelloDimitri on Heroku stack; Zurb Foundation deployment on Heroku；
- 不得不重新配置我的 server.js 因为 expressjs 所需的路径必须根据我的项目；
- 在我的根文件夹中为 Heroku 创建了一个 procfile 以使用 yarn 而不是 npm（如果没有配置文件则使用 npm）；
- 更新了我的 gulpfile.babel.js 以简单地构建应用程序而不启动任何服务器；
- 更新了我的 package.json 并在依赖项中添加了 expressjs；
- 更新了我的 package.json 并添加了节点的启动脚本以根据 server.js; 启动服务器
- 毕竟，我在本地 运行
yarn start一切顺利； - 将更改推送到我的 GitHub 存储库并部署在 Heroku 上。
就是这样。
我希望这对遇到同样问题的人有所帮助。非常感谢@Chris。 干杯。
package.json 脚本：
"scripts": {
"start": "gulp && node server.js",
"build": "gulp build --production" }
package.json 依赖项（我和 devDependencies 一样。仍然不知道在 Heroku 上构建是否需要它们。一旦我发现就会更新。）：
"dependencies": {
"express": "^4.14.1",
"foundation-sites": "^6.5.3",
"jquery": "^3.2.1",
"motion-ui": "^2.0.3",
"what-input": "^5.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0",
"autoprefixer": "^9.1.5",
"babel-loader": "^8.0.4",
"browser-sync": "^2.10.0",
"gulp": "^4.0.0",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^3.3.1",
"gulp-cli": "^2.0.1",
"gulp-concat": "^2.5.2",
"gulp-connect": "^5.7.0",
"gulp-extname": "^0.2.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"gulp-stylus": "^2.7.0",
"js-yaml": "^3.4.6",
"panini": "^1.3.0",
"rimraf": "^2.4.3",
"style-sherpa": "^1.0.0",
"uncss": "^0.16.2",
"vinyl-named": "^1.1.0",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1",
"yargs": "^12.0.2"
}
gulpfile.babel.js
gulp.task('default',gulp.series('build'));
简介
web: yarn start
server.js代码：
// server.js
var express = require('express')
var app = express()
app.set('port', (process.env.PORT || 5000))
app.use(express.static('dist',{
index: false,
immutable: true,
cacheControl: true,
maxAge: "30d"
}));
// app.use('/bower_components', express.static(__dirname + '/bower_components'))
console.log("dirname "+__dirname)
app.get('/', function(request, response) {
console.log('request: '+request)
response.sendFile(__dirname+'/dist/index.html')
})
app.listen(app.get('port'), function() {
console.log("Node app is running at localhost:" + app.get('port'))
})