簡單AngularJS應用：顯示錯誤Gruntfile.js

$ grunt connect:development:keepalive簡單AngularJS應用：顯示錯誤Gruntfile.js

ERROR:

Running "connect:development:keepalive" (connect) task

Warning: undefined is not a function Use --force to continue.

Aborted due to warnings.

我目前學習AngularJS從書專業AngularJS（Wrox的），這裏是從書基本代碼：

app/index.html

<!DOCTYPE HTML> 
<html ng-app="Workflow"> 
    <head> 
     <title>Chapter Two</title> 
     <link rel="stylesheet" href="main.css" /> 
    </head> 
    <body ng-controller="ToolsCtrl"> 
     <h1>Workflow tools from this chapter:</h1> 
     <ul> 
      <li ng-repeat="tool in tools">{{tool}}</li> 
     </ul> 

     <script src="bower_components/angular/angular.js"></script> 
     <script src="app.js"></script> 
    </body> 
</html>

app/main.less

html, 
body { 
    h1 { 
    color: steelblue; 
    }

app/app.js

'use strict'; 

angular.module('Workflow', []) 
.controller('ToolsCtrl', function($scope) { 
     $scope.tools = [ 
      'Bower', 
      'Grunt', 
      'Yeoman' 
     ]; 
    });

Gruntfile.js

module.exports = function(grunt) { 
    grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 

     connect: { 
      options: { 
       port: 9000, 
       open: true, 
       livereload: 35729, 
       hostname: 'localhost' 
      }, 

      development: { 
       options: { 
        middleware: function(connect) { 
         return [ 
          connect.static('app') 
         ]; 
        } 
       } 
      } 
     }, 

     less: { 
      development: { 
       files: { 
        'app/main.css': 'app/main.less' 
       } 
      } 
     } 
    }); 

    require('load-grunt-tasks')(grunt); 

    grunt.registerTask('default', []); 
};

.bowerrc

{ 
    "directory": "app/bower_components" 
}

這些是由本書提供，該應用程序的所有代碼。此外，作爲這本書問，我跑了來自終端的根文件夾下面的命令：

sudo npm install -g bower

sudo npm install -g grunt-cli

sudo npm install --save-dev grunt

sudo npm install --save-dev load-grunt-tasks

sudo npm install --save-dev grunt-contrib-connect

sudo npm install --save-dev grunt-contrib-jshint

sudo npm install --save-dev grunt-contrib-less

sudo npm install --save-dev grunt-contrib-watch

sudo npm install -g less

lessc app/main.less > app/main.css

grunt less

我不得不使用sudo因爲，否則被扔的錯誤：

Please try running this command again as root/Administrator.

根據這本書，如果我從我的終端運行grunt connect:development:keepalive，那麼，我的瀏覽器應該啓動應用程序運行。但是，正如我上面提到的那樣，給了我錯誤。

請幫助我的情況，因爲我不知道我在做什麼錯。這就是我包括所有代碼的原因。我對這些工具和技術非常陌生，我甚至不確定是否應該按照本書學習AngularJS。

謝謝。

EDIT:

由於我使用的是WebStorm IDE，它顯示我在Gruntfile.js問題在該行connect.static('app')。當我將鼠標懸停在它上面時，它說Unresolved function or method static()。

來源

2015-10-26 Sajib Acharya

它是正確的，問題是在Gruntfile.js在該行connect.static（「應用」）

按照forum從網站的書「靜態」不再的一部分連接模塊，你將需要運行npm install serve-static。之後聲明一個變量在你Gruntfile.js你grunt.intConfig線，像這樣上面...

var serveStatic = require('serve-static');

然後改變你的中間件功能，看起來像這樣

middleware: function(connect) { 
      return [ 
       serveStatic('app')

希望這會有所幫助。它幫我解決了這個問題

來源

2016-03-09 18:30:17 gnattyp

4個月，然後我得到了答案。謝謝你解決這個問題。非常感謝。 :) –

簡單AngularJS應用：顯示錯誤Gruntfile.js

回答

相關問題