[英]Deploy Foundation for Apps on Heroku
I am trying to deploy an app created with "Foundation for Apps" on Heroku with no success. 我试图在Heroku上部署使用“ Foundation for Apps”创建的应用程序,但没有成功。
Package.json: 的package.json:
{
"name": "foundation-apps-template",
"version": "1.0.3",
"scripts": {
"start": "gulp",
"postinstall": "bower install"
},
"dependencies": {
"bower": "^1.3.12",
"connect-modrewrite": "^0.7.9",
"front-matter": "^0.2.0",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^1.0.1",
"gulp-concat": "^2.4.2",
"gulp-connect": "^2.2.0",
"gulp-load-plugins": "^0.8.0",
"gulp-ruby-sass": "^0.7.1",
"gulp-uglify": "^1.0.2",
"gulp-util": "^3.0.1",
"rimraf": "^2.2.8",
"run-sequence": "^1.0.2",
"through2": "^0.6.3"
},
"devDependencies": {
"connect-modrewrite": "^0.7.9",
"front-matter": "^0.2.0",
"gulp": "^3.8.10",
"gulp-autoprefixer": "^1.0.1",
"gulp-concat": "^2.4.2",
"gulp-connect": "^2.2.0",
"gulp-load-plugins": "^0.8.0",
"gulp-ruby-sass": "^0.7.1",
"gulp-uglify": "^1.0.2",
"gulp-util": "^3.0.1",
"rimraf": "^2.2.8",
"run-sequence": "^1.0.2",
"through2": "^0.6.3"
},
"private": true
}
gulpfile.js gulpfile.js
// FOUNDATION FOR APPS TEMPLATE GULPFILE
// -------------------------------------
// This file processes all of the assets in the "client" folder, combines them with the Foundation
// for Apps assets, and outputs the finished files in the "build" folder as a finished app.
// 1. LIBRARIES
// - - - - - - - - - - - - - - -
var gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
rimraf = require('rimraf'),
sequence = require('run-sequence'),
path = require('path'),
modRewrite = require('connect-modrewrite'),
router = require('./bower_components/foundation-apps/bin/gulp-dynamic-routing');
// 2. SETTINGS VARIABLES
// - - - - - - - - - - - - - - -
// Sass will check these folders for files when you use @import.
var sassPaths = [
'client/assets/scss',
'bower_components/foundation-apps/scss'
];
// These files include Foundation for Apps and its dependencies
var foundationJS = [
'bower_components/fastclick/lib/fastclick.js',
'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
'bower_components/tether/tether.js',
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'bower_components/foundation-apps/js/vendor/**/*.js',
'bower_components/foundation-apps/js/angular/**/*.js',
'!bower_components/foundation-apps/js/angular/app.js'
];
// These files are for your app's JavaScript
var appJS = [
'client/assets/js/app.js'
];
// 3. TASKS
// - - - - - - - - - - - - - - -
// Cleans the build directory
gulp.task('clean', function(cb) {
rimraf('./build', cb);
});
// Copies user-created files and Foundation assets
gulp.task('copy', function() {
var dirs = [
'./client/**/*.*',
'!./client/templates/**/*.*',
'!./client/assets/{scss,js}/**/*.*'
];
// Everything in the client folder except templates, Sass, and JS
gulp.src(dirs, {
base: './client/'
})
.pipe(gulp.dest('./build'));
// Iconic SVG icons
gulp.src('./bower_components/foundation-apps/iconic/**/*')
.pipe(gulp.dest('./build/assets/img/iconic/'));
// Foundation's Angular partials
return gulp.src(['./bower_components/foundation-apps/js/angular/components/**/*.html'])
.pipe(gulp.dest('./build/components/'));
});
// Compiles Sass
gulp.task('sass', function() {
return gulp.src('client/assets/scss/app.scss')
.pipe($.rubySass({
loadPath: sassPaths,
style: 'nested',
bundleExec: true
})).on('error', function(e) {
console.log(e);
})
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie 10']
}))
.pipe(gulp.dest('./build/assets/css/'));
});
// Compiles and copies the Foundation for Apps JavaScript, as well as your app's custom JS
gulp.task('uglify', function() {
// Foundation JavaScript
gulp.src(foundationJS)
.pipe($.uglify({
beautify: true,
mangle: false
}).on('error', function(e) {
console.log(e);
}))
.pipe($.concat('foundation.js'))
.pipe(gulp.dest('./build/assets/js/'))
;
// App JavaScript
return gulp.src(appJS)
.pipe($.uglify({
beautify: true,
mangle: false
}).on('error', function(e) {
console.log(e);
}))
.pipe($.concat('app.js'))
.pipe(gulp.dest('./build/assets/js/'))
;
});
// Copies your app's page templates and generates URLs for them
gulp.task('copy-templates', ['copy'], function() {
return gulp.src('./client/templates/**/*.html')
.pipe(router({
path: 'build/assets/js/routes.js',
root: 'client'
}))
.pipe(gulp.dest('./build/templates'))
;
});
// Starts a test server, which you can view at http://localhost:8080
gulp.task('server:start', function() {
$.connect.server({
root: './build',
port: process.env.PORT || 5000,
livereload: false
});
});
// Builds your entire app once, without starting a server
gulp.task('build', function() {
sequence('clean', ['copy', 'sass', 'uglify'], 'copy-templates', function() {
console.log("Successfully built.");
})
});
// Default task: builds your app, starts a server, and recompiles assets when they change
gulp.task('default', ['build', 'server:start'], function() {
// Watch Sass
gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']);
// Watch JavaScript
gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify']);
// Watch static files
gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy']);
// Watch app templates
gulp.watch(['./client/templates/**/*.html'], ['copy-templates']);
});
When I deploy, the app successfully build with one exception: 部署后,该应用程序成功构建,但有一个例外:
> gulp
> foundation-apps-template@1.0.3 start /app
[22:41:04] Using gulpfile ~/gulpfile.js
[22:41:04] Starting 'clean'...
[22:41:04] Starting 'build'...
[22:41:04] Starting 'server:start'...
[22:41:04] Starting 'default'...
[22:41:04] Finished 'server:start' after 323 ms
[22:41:04] Server started http://localhost:23921
[22:41:04] Finished 'build' after 343 ms
[22:41:04] Finished 'default' after 40 ms
[22:41:04] Starting 'sass'...
[22:41:04] Finished 'clean' after 386 ms
[22:41:04] Starting 'copy'...
State changed from starting to up
[22:41:05] Starting 'uglify'...
{ [Error: spawn bundle ENOENT]
showProperties: true,
errno: 'ENOENT',
message: 'spawn bundle ENOENT',
code: 'ENOENT',
syscall: 'spawn bundle',
path: 'bundle',
plugin: 'gulp-ruby-sass' }
name: 'Error',
stack: 'Error: spawn bundle ENOENT\n at exports._errnoException (util.js:746:11)\n at Process.ChildProcess._handle.onexit (child_process.js:1046:32)\n at child_process.js:1137:20\n at process._tickCallback (node.js:355:11)',
showStack: false,
[22:41:08] Finished 'sass' after 3.64 s
[22:41:08] Finished 'uglify' after 3.28 s
Successfully built.
After that, when I open the browser, I see the website, without CSS styles. 之后,当我打开浏览器时,看到的网站没有CSS样式。
https://fierce-escarpment-9048.herokuapp.com/assets/css/app.css 404 Not Found https://fierce-escarpment-9048.herokuapp.com/assets/css/app.css 404未找到
I suspect that - because of that exception with sass - the CSS file was not generated and - therefore - is not reachable to the server. 我怀疑-由于sass的异常-没有生成CSS文件,因此-服务器无法访问。
Any suggestion how I can fix it? 有什么建议我可以解决吗?
The specific errors you have posted actually relate to JavaScript, and most likely server-side JavaScript in the form of Node.js. 您发布的特定错误实际上与JavaScript有关,最有可能与Node.js形式的服务器端JavaScript有关。 The "ENOENT" is specific to errors reported from Node.js' libuv component ( https://github.com/joyent/node/blob/master/deps/uv/include/uv.h ), and as you can see from the provided link relates to "no such file or directory". “ ENOENT”特定于Node.js的libuv组件( https://github.com/joyent/node/blob/master/deps/uv/include/uv.h )报告的错误。提供的链接与“没有这样的文件或目录”有关。
So, your problem from the error logs/gulpfile.js is that the 'default' action initiates the task comprising of concurrent actions 'build' and 'server-start' (gulpfile.js, line 144). 因此,您从错误logs / gulpfile.js中遇到的问题是,“默认”操作会启动由并发操作“ build”和“ server-start”组成的任务(gulpfile.js,第144行)。 The 'build' task itself is a function (line 137) that initiates a sequence starting with 'clean' (line 138) to which we should return. “ build”任务本身是一个函数(第137行),该函数启动一个以“ clean”(第138行)开头的序列,我们应该返回该序列。 But first, 'server-start'... your server does start: "Starting 'server:start'... Finished 'server:start' after 323 ms... Server started http://localhost:23921...State changed from starting to up." 但是首先,“服务器启动” ...您的服务器确实启动:“正在启动'server:start'...在323毫秒后完成了'server:start'...服务器启动了http:// localhost:23921 ...状态从开始更改为开始。” So, you can see the matching output of "Starting [x]... Finished [x]" pairs captured in the logs. 因此,您可以看到日志中捕获的“开始[x] ...完成[x]”对的匹配输出。 This is significant. 这很重要。
Returning to the 'build' task. 返回到“构建”任务。 That causes 'clean', followed by the concurrent actions of 'copy', 'sass' and 'uglify'; 这导致“干净”,随后是“复制”,“无礼”和“丑化”的并发动作; it is within this latter group that your problem occurred. 正是在后一组中发生了您的问题。 Firstly, note we have "Starting 'clean'... Finished 'clean' after 386 ms" - again, we have the matched pair - and clean must occur before copy/sass/uglify. 首先,请注意我们有“在386毫秒后开始'clean'...完成'clean'”-再次,我们有匹配的对-并且必须在copy / sass / uglify之前进行clean。 These are concurrent actions, and your problem is that the logged output is written apparently haphazardly as these tasks occur (thats true of the original overlapping build and start-server tasks too). 这些是并发操作,您的问题是,在这些任务发生时,日志输出显然是随意编写的(原始重叠的构建任务和启动服务器任务也是如此)。 So, we can see all of 'copy', 'sass' and 'uglify' start... but only 'sass' and 'uglify' finish! 因此,我们可以看到所有“ copy”,“ sass”和“ uglify”开始……但只有“ sass”和“ uglify”完成! And, we have 'copy' start, and an otherwise unmatched/disassociated error message. 并且,我们有“复制”开始,以及其他不匹配/不相关的错误消息。 Your error has arisen from the failure to 'copy', not from 'sass'! 您的错误是由“复制”失败引起的,而不是由“无礼”引起的! You failed to copy, and the (Node.js-based) server was raising "no such file or directory". 您无法复制,并且(基于Node.js的)服务器正在引发“无此类文件或目录”。 Sorry, I couldn't interpret what its failed to copy (perhaps content from the 'client' directory), but its concerning absent content - perhaps even a simple misspelt filename, or something very similar. 抱歉,我无法解释其复制失败的内容(可能是'client'目录中的内容),但是它涉及到的内容缺失-甚至可能是简单的拼写错误的文件名,或类似的东西。 You should probably examine closely the file content in your directory. 您可能应该仔细检查目录中的文件内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.