Question

$ grunt connect：development：keepalive

ERROR：

运行“connect：development：keepalive”（连接）任务

警告：undefined不是函数使用--force继续。

因警告而中止。

我目前正在从 Professional AngularJS（wrox）一书中学习AngularJS，这是本书的基本代码：

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，否则就会抛出错误：

请尝试以root / Administrator方式再次运行此命令。

根据这本书，如果我从终端运行grunt connect:development:keepalive，那么，我的浏览器应该在应用程序运行的情况下启动。但是正如我上面提到的那样给我错误。

请帮助我解决这个问题，因为我不知道我做错了什么。这就是我包含所有代码的原因。我对这些工具和技术都很陌生，我甚至不确定是否应该按照这本书来学习AngularJS。

谢谢。

修改

由于我使用的是WebStorm IDE，因此它在行Gruntfile.js中connect.static('app')显示了一个问题。当我将鼠标悬停在它上面时，它会显示Unresolved function or method static()。

Answer 1

问题出在connect.static（'app'）行中的Gruntfile.js中是正确的

根据网站上的forum，“静态”不再是Connect模块的一部分，您需要运行npm install serve-static。之后在你的Gruntfile.js中声明一个高于grunt.intConfig行的变量，就像这样......

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

然后将您的中间件功能更改为

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

希望这会有所帮助。它帮我解决了它

简单的AngularJS应用程序：在Gruntfile.js中显示错误

1 个答案: