Простое приложение AngularJS: отображение ошибки в Gruntfile.js

$ grunt connect: разработка:keepalive

ОШИБКА:

Выполнение задачи "connect:development:keepalive" (подключение)

Предупреждение: undefined не является функцией Используйте --force для продолжения.

Прервано из-за предупреждений.

Я сейчас учусь AngularJS из книги Professional 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 потому что в противном случае это была ошибка

Пожалуйста, попробуйте запустить эту команду снова как root/Administrator.

Согласно книге, если я бегу grunt connect:development:keepalive из моего терминала мой браузер должен запуститься с запущенным приложением. Но дает мне ошибку, как я уже говорил выше.

Пожалуйста, помогите мне с ситуацией, так как я понятия не имею, что я делаю неправильно. Вот почему я включил весь код. Я очень плохо знаком с этими инструментами и технологиями, и я даже не уверен, должен ли я следовать этой книге, чтобы изучать AngularJS.

Спасибо.

РЕДАКТИРОВАТЬ:

Поскольку я использую WebStorm IDE, это показывает мне проблему в Gruntfile.js в соответствии connect.static('app'), Это говорит Unresolved function or method static() когда я наведу на него мышь.

Источник

1 ответ

Решение

Верно, что проблема в Gruntfile.js в строке connect.static('app')

Согласно форуму с сайта для книги "static" больше не является частью модуля Connect, и вам нужно будет запустить npm install serve-static. после этого объявите переменную над строкой grunt.intConfig в вашем Gruntfile.js примерно так...

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

затем измените свою функцию промежуточного программного обеспечения, чтобы она выглядела так

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

надеюсь это поможет. Это помогло мне решить это

Источник
Другие вопросы по тегам