在Heroku上部署应用程序基础

时间：2015-03-01 21:11:52

标签： heroku gulp zurb-foundation zurb-foundation-apps

我正在尝试在Heroku上部署使用“Foundation for Apps”创建的应用程序，但没有成功。

的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 

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

部署时，应用程序成功构建，但有一个例外：

> 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.

之后，当我打开浏览器时，我看到了没有CSS样式的网站。

https://fierce-escarpment-9048.herokuapp.com/assets/css/app.css 找不到404

我怀疑 - 由于sass的例外 - 未生成CSS文件，因此 - 无法访问服务器。

有什么建议我可以解决它吗？

2 个答案:

答案 0 :(得分：0)

您发布的特定错误实际上与JavaScript有关，而且很可能是Node.js形式的服务器端JavaScript。 ＆＃34; ENOENT＆＃34;特定于Node.js报告的错误＆＃39; libuv组件（https://github.com/joyent/node/blob/master/deps/uv/include/uv.h），您可以从提供的链接中看到与＃34;没有这样的文件或目录＆＃34;。

所以，错误日志/ gulpfile.js中的问题是＆＃39;默认＆＃39;动作启动包含并发动作的任务＆＃39; build＆＃39;和＆＃39;服务器启动＆＃39; （gulpfile.js，第144行）。 ＆＃39;构建＆＃39;任务本身是一个函数（第137行），它启动一个以＆＃39; clean＆＃39;开头的序列。 （第138行）我们应该返回。但首先，服务器启动＆＃39; ...您的服务器确实启动了：＆＃34;启动＆＃39;服务器：启动＆＃39; ...已完成＆＃39;服务器：启动＆＃39;在323毫秒之后......服务器启动http://localhost:23921...State从启动变为启动。＆＃34;所以，你可以看到＆＃34;开始[x]的匹配输出......完成[x]＆＃34;在日志中捕获的对。这很重要。

回到＆＃39; build＆＃39;任务。这导致了“干净”，然后是“复制”，“快速”的并发行为。并且＆＃39; uglify＆＃39 ;;您的问题发生在后一组内。首先，请注意我们已经＆＃34;开始＆＃39;清洁＆＃39; ...已完成＆＃39;清洁＆＃39;在386毫秒后＃34; - 再次，我们有匹配的对 - 并且必须在复制/ sass / uglify之前进行清理。这些是并发操作，您的问题是，当这些任务发生时，记录的输出显然是随意写入的（原始重叠构建和启动服务器任务也是如此）。所以，我们可以看到所有＆＃39; copy＆＃39;，＆＃39; sass＆＃39;并且＆＃39; uglify＆＃39;开始......但只有＆＃39; sass＆＃39;并且＆＃39; uglify＆＃39;完！而且，我们已经复制了＃39;启动，以及其他无法匹配/取消关联的错误消息。您的错误源于未能复制，而不是来自＆＃39; sass＆＃39;！您无法复制，并且（基于Node.js的）服务器正在提升＆＃34;没有这样的文件或目录＆＃34;。 对不起，我无法解释它未能复制的内容（可能是来自客户端目录的内容），但它关于缺少的内容 - 甚至可能是一个简单的拼写错误的文件名，或者非常相似的内容。您应该仔细检查目录中的文件内容。

答案 1 :(得分：0)

找到了this指南，其中介绍了如何将应用程序的基础部署到heroku，我已经尝试过并且像魅力一样工作。希望它有所帮助。

相关问题
最新问题