在Heroku上部署的Grunt應用程序...接下來是什麼？...我的應用程序不啓動

Question

我有一個基本的節點應用程序與gruntfile，我有一些痛苦，使部署。所以我做了一個新的咕task任務，做了一些改變。 部署然後是好的。

但現在當我去我的應用程序。我有一個空白頁面。 它不加載appConfig.app目錄。

我可能會錯過我無法弄清的大事。我認爲grunt連接會做電線，但似乎server.js正在等待的東西。

注：我覺得我不需要在這裏表達。

下面是不同的文件：

• gruntfile.js
• server.js
• package.js

Gruntfile.js

'use strict'; 

module.exports = function (grunt) { 

require('load-grunt-tasks')(grunt); 
require('time-grunt')(grunt); 
var modRewrite = require('connect-modrewrite'); 

// Configurable paths for the application 
var appConfig = { 
    app: require('./bower.json').appPath || 'app', 
    dist: 'dist' 
}; 

//Environment vars 
var envConfig = { 
    dev: { 
     //baseUrl: 'http://localhost:3000', 
     loginUrl: 'http://demo.lvh.me:9000', 
     uploadUrl: 'anuploadurl/upload' 
    }, 
    prod: { 
     baseUrl: 'http://aprodurl', 
     loginUrl: 'an herokuapp url' 
    } 
}; 


// Define the configuration for all the tasks 
grunt.initConfig({ 

    appConf: appConfig, 

    // Empties folders to start fresh 
    clean: { 
     dist: { 
      files: [{ 
       dot: true, 
       src: [ 
        '.tmp', 
        '<%= appConf.dist %>/{,*/}*', 
        '!<%= appConf.dist %>/.git*' 
       ] 
      }], 
      options: { 
       force: true //since dist directory is outside, we must use force flag. 
      } 
     }, 
     server: '.tmp' 
    }, 

    //server settings 
    ngconstant: { 
     // Options for all targets 
     options: { 
      space: ' ', 
      wrap: '\'use strict\';\n\n {%= __ngModule %}', 
      name: 'config' 
     }, 
     // Environment targets 
     development: { 
      options: { 
       dest: 'app/config.js' 
      }, 
      constants: envConfig.dev 
     }, 
     production: { 
      options: { 
       dest: '<%= appConf.app %>/config.js' 
      }, 
      constants: envConfig.prod 
     } 
    }, 

    // Automatically inject Bower components into the app 
    wiredep: { 
     app: { 
      src: ['<%= appConf.app %>/index.html'], 
      ignorePath: /\.\.\//, 
      'options': { 
       'overrides': { 
        'semantic-ui': { 
         'main': ['dist/semantic.css', 'dist/semantic.js'] 
        } 
       } 
      } 
     } 
    }, 

    // Copies remaining files to places other tasks can use 
    copy: { 
     dist: { 
      files: [{ 
       expand: true, 
       dot: true, 
       cwd: '<%= appConf.app %>/*', 
       dest: '<%= appConf.dist %>', 
       src: [ 
        '*.{ico,png,txt}', 
        '{,*/}*.html', 
        'images/{,*/}*.{webp}', 
        'fonts/*' 
       ] 
      }, { 
       expand: true, 
       cwd: '<%= appConf.app %>/images', 
       dest: '<%= appConf.dist %>/images', 
       src: ['generated/*'] 
      }, { // not in use 
       expand: true, 
       cwd: 'bower_components/font-awesome', 
       src: 'fonts/*', 
       dest: '<%= appConf.dist %>' 
      }] 
     }, 
     styles: { 
      files: [ 
       { 
        expand: true, 
        cwd: '<%= appConf.app %>/*', 
        dest: '<%= appConf.dist %>/styles', 
        src: '{,*/}*.css' 
       } 
      ] 
     } 
    }, 

    // Run some tasks in parallel to speed up the build process 
    concurrent: { 
     server: [ 
      'copy:styles' 
     ], 
     test: [ 
      'copy:styles' 
     ], 
     dist: [ 
      'copy:styles', 
      'svgmin' 
     ] 
    }, 

    // Add vendor prefixed styles 
    autoprefixer: { 
     options: { 
      browsers: ['last 1 version'] 
     }, 
     dist: { 
      files: [{ 
       expand: true, 
       cwd: '<%= appConf.app %>/*', 
       src: '{,*/}*.css', 
       dest: '<%= appConf.dist %>/styles/' 
      }] 
     } 
    }, 

    // The actual grunt server settings 
    connect: { 
     options: { 
      port: 9000, 
      // Change this to '0.0.0.0' to access the server from outside. 
      hostname: '0.0.0.0', 
      livereload: 35729 
     }, 
     livereload: { 
      options: { 
       open: true, 
       middleware: function (connect) { 
        return [ 
         modRewrite(['^[^\\.]*$ /index.html [L]']), 
         connect.static('.tmp'), 
         connect().use(
          '/bower_components', 
          connect.static('./bower_components') 
         ), 
         connect.static(appConfig.app) 
        ]; 
       } 
      } 
     }, 
     test: { 
      options: { 
       port: 9001, 
       middleware: function (connect) { 
        return [ 
         rewriteRulesSnippet, 
         connect.static('.tmp'), 
         connect.static('test'), 
         connect().use(
          '/bower_components', 
          connect.static('./bower_components') 
         ), 
         connect.static(appConfig.app) 
        ]; 
       } 
      } 
     }, 
     dist: { 
      options: { 
       port:process.env.PORT, 
       open: true, 
       base: '<%= appConf.app %>' 
      } 
     } 
    }, 

    // Make sure code styles are up to par and there are no obvious mistakes 
    jshint: { 
     options: { 
      jshintrc: '.jshintrc', 
      reporter: require('jshint-stylish') 
     }, 
     all: { 
      src: [ 
       'Gruntfile.js', 
       'server.js', 
       '<%= appConf.app %>/{,*/}*.js' 
      ] 
     } 
    }, 

    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
     bower: { 
      files: ['bower.json'], 
      tasks: ['wiredep'] 
     }, 
     js: { 
      files: ['<%= appConf.app %>/{,**/}*.js'], 
      tasks: ['newer:jshint:all'], 
      options: { 
       livereload: '<%= connect.options.livereload %>' 
      } 
     }, 
     css: { 
      files: ['<%= appConf.app %>/styles/{,**/}*.scss'], 
      tasks: ['sass'], 
      options: { 
       livereload: true, 
      }, 
     }, 
     styles: { 
      files: [ 
       '<%= appConf.app %>/styles/{,**/}*.css', 
       '<%= appConf.app %>/../templating/css/style.css' 
      ], 
      tasks: ['newer:copy:styles', 'autoprefixer'] 
     }, 
     gruntfile: { 
      files: ['Gruntfile.js'] 
     }, 
     livereload: { 
      options: { 
       livereload: '<%= connect.options.livereload %>' 
      }, 
      files: [ 
       '<%= appConf.app %>/{,**/}*.html', 
       '.tmp/styles/{,**/}*.css', 
       '<%= appConf.app %>/images/{,**/}*.{png,jpg,jpeg,gif,webp,svg}' 
      ] 
     } 
    }, 

    sass: { 
     dev: { 
      options: { 
       style: 'expanded' 
      }, 
      files: [ 
       { 
        expand: true, 
        cwd: '<%= appConf.app %>/styles', 
        src: ['*.scss'], 
        ext: '.css', 
        dest: '<%= appConf.dist %>/styles' 
       } 
      ] 
     } 
    } 

}); 

grunt.loadNpmTasks('grunt-sass'); 

// Build the development application 
grunt.registerTask('serve', 'Compile then start a connect web server', function() { 

    grunt.task.run([ 
     'clean:server', 
     'ngconstant:development', 
     'wiredep', 
     'sass', 
     'concurrent:server', 
     'autoprefixer', 
     'connect:livereload', 
     'watch' 
    ]); 
}); 

// Build the production application 
grunt.registerTask('build', 'Compile app on production settings', function() { 

    grunt.task.run([ 
     'clean:server', 
     'ngconstant:production', 
     'wiredep', 
     'sass', 
     'concurrent:server', 
     'autoprefixer', 
     'connect:dist' 
    ]); 
}); 

}; 

個server.js

var http = require('http'); 
var port = process.env.PORT || 80; 

http.createServer(function (req, res) { 

    res.writeHead(200, { 
     'Content-Type': 'text/html', 
     'Access-Control-Allow-Origin' : '*' 
    }); 
    //res.end('app/index.html'); 

}).listen(port); 
console.log('Server running at port '+port); 

的package.json

{ 
"private": true, 
"engines": { 
    "node": "4.2.2" 
}, 
"scripts": { 
    "postinstall": "bower install && grunt build", 
    "start": "node server.js" 
}, 
"dependencies": { all the dependancies .... } 
} 

Answer 1

這是一個巨大的和苛刻的調試，但我終於找到了。

它是由多個失誤和錯誤來我：

1. 節點server.js沒用
2. 我invstigated上繁重的Connect方法並創建了一個生產設置

3. 我分裂了咕嚕投放到咕嚕生成任務和WebConnect的任務

4. 然後更新的package.json文件

對Heroku的非常重要的：在連接對象上Gruntfile.js：

dist: { 
     options: { 
      port:process.env.PORT, #<=== need to have a dynamic port env for Heroku deployment 
      open: true, 
      base: '<%= appConf.dist %>' 
     } 
    } 

這裏加入繁重任務：

// Build the production application 
grunt.registerTask('build', 'Compile on dist folder', function() { 

    grunt.task.run([ 
     'clean:dist', 
     'ngconstant:production', 
     'wiredep', 
     'sass', 
     'concurrent:dist', 
     'autoprefixer:dist' 
    ]); 
}); 

// Build the production application 
grunt.registerTask('webconnect', 'connect web server', function() { 

    grunt.task.run([ 
     'connect:dist' 
    ]); 
}); 

然後的package.json：

"scripts": { 
    "postinstall": "bower install && grunt build", 
    "start": "grunt webconnect" 
}