Reputation: 1733
$ grunt connect:development:keepalive
ERROR:
Running "connect:development:keepalive" (connect) task
Warning: undefined is not a function Use --force to continue.
Aborted due to warnings.
I am presently learning AngularJS
from the book Professional AngularJS (wrox) and here's a basic code from the book:
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"
}
These are all the codes provided by the book as is, for this application. Also, as the book asked, I ran these commands on the root folder from the terminal:
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
I had to use sudo
because, otherwise it was throwing error:
Please try running this command again as root/Administrator.
According to the book, if I run grunt connect:development:keepalive
from my terminal, then, my browser should fire up with the application running. But is giving me the error as I mentioned above.
Please help me with the situation as I have no idea what wrong am I doing. This is why I included all the code. I am very new to these tools and technologies, and I am not even sure if I should follow this book to learn AngularJS.
Thank you.
EDIT:
Since I am using the WebStorm IDE, it is showing me a problem in the Gruntfile.js
in the line connect.static('app')
. It says Unresolved function or method static()
when I hover the mouse over it.
Upvotes: 1
Views: 239
Reputation: 92
it is correct that the problem is in the Gruntfile.js in the line connect.static('app')
According to the forum from the website for the book "static" is no longer a part of Connect module and you will need to run npm install serve-static. after that declare a variable above your grunt.intConfig line in your Gruntfile.js like so...
var serveStatic = require('serve-static');
then change your middleware function to look like this
middleware: function(connect) {
return [
serveStatic('app')
hope this helps. It helped me solve it
Upvotes: 3