I've got a following Gruntfile.js which includes only two tasks: the first one parses/generates files and the second one, grunt-contrib-connect, starts web server:
module.exports = function(grunt) {
grunt.initConfig({
aglio: {
docs: {
files: {
'index.html': 'api.md',
},
options: {
theme: "slate"
}
}
},
connect: {
server: {
options: {
port: 9001,
hostname: 'localhost',
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-aglio');
grunt.registerTask('default', ['aglio', 'connect']);
};
The problem is that the server exits silently and I don't know why. In the console, it looks like this:
tducin#tducin-home:~/Workspace/duck-blueprint$ grunt
Running "aglio:docs" (aglio) task
>> Written to index.html
Running "connect:server" (connect) task
Started connect web server on http://localhost:9001
Done, without errors.
Can anybody point me on what is wrong with my connect task configuration?
Did you read the documentation of grunt-contrib-connect?
According to the document.You need to set keepalive true if want keep alive the server after grunt tasks compleated.
connect: {
server: {
options: {
port: 9001,
hostname: 'localhost',
keepalive : true
}
}
Keep the server alive indefinitely. Note that if this option is enabled, any tasks specified after this task will never run. By default, once grunt's tasks have completed, the web server stops. This option changes that behavior.
https://github.com/gruntjs/grunt-contrib-connect/blob/master/README.md
Related
I'm setting grunt-contrib-watch, and grunt-contrib-connect to live reload, like this:
watch: {
options: {
livereload: true,
},
files: ['src/**/*'],
tasks: ['serve']
},
connect: {
server: {
options: {
port: 8000,
base: './dist',
hostname: '0.0.0.0',
protocol: 'http',
livereload: true,
open: true,
}
}
},
But I'm getting this error when connect tries to reload:
Running "connect:server" (connect) task
Fatal error: Port 8000 is already in use by another process.
I tried a few different ports, but had the same problem.
I don't get how grunt-contrib-connect server can have a conflict with it's own port.
How can I get this to work?
A couple requirements:
Make sure you're not already starting up localhost 8000 somewhere else. If you have two local servers running on the same port it won't work. (Check your other tabs in terminal)
Make sure the following is in your html(at the bottom with the other js)
<script src="//localhost:35729/livereload.js"></script>
and then try something like this:
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
livereload: 35729,
open:{
target: "http://localhost:8000"
}
}
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['src/**/*'],
options: {
spawn: false,
},
},
html: {
files: ["**/*.html"]
}
},
Then you can setup a task if you haven't like so:
grunt.registerTask("server", ["connect", "watch"]); // Type grunt server -- Creates a server and checks for any changes in the html/css
It turns out, the serve task was where I was starting the server, so it was trying to start another server every time it reloaded. I switched it to a dev task where the site was recompiled, but doesn't start a server.
Probably a different case but I had exactly the same error message no matter which port number I set in my gruntfile. Turned out that the problem was due to the fact that I had the port number defined as a string not a number.
I am using a Grunt connect web server to serve JS and CSS files locally.
Grunt-contrib-connect: https://github.com/gruntjs/grunt-contrib-connect
The Grunt task looks like the following:
connect: {
server: {
options: {
port: 9001,
base: '<%= templateDir %>/interface/build/',
livereload: true,
debug: true
}
}
}
It servers JS files correctly, but all the CSS files served are empty.
The following are the local URLs being used to access the files:
JS URL: http://localhost:9001/production.js
CSS URL: http://localhost:9001/production.css
Any assistance or thoughts is greatly appreciated!
Turns out the templateDir config variable was not empty, but did not result in an error. Thing that threw me was the mapped to directory actually existed with files of the exact same name.
Solution was to pass in the variable when registering the task:
grunt.registerTask('serve', [
'set_config:templateDir:<%= pkg.templateDir %>',
'connect',
'watch'
]);
I'm trying to use grunt-express and grunt-watch. I would like the server to reload with I change my server file.
Here is what I got.
Gruntfile.js
var path = require('path');
module.exports = function(grunt) {
grunt.initConfig({
express: {
options: {
port: 8000
},
load: {
server: path.resolve('./app')
}
},
watch: {
express: {
files: ['app.js'],
tasks: ['express:load']
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('server', ['express:load', 'express-keepalive', 'watch']);
};
app.js
var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.get('/', function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
exports = module.exports = server;
exports.use = function() {
app.use.apply(app, arguments);
};
When I type grunt server in the console I get:
Running "express:load" (express) task
Running "express-server:load" (express-server) task
Web server started on port:8000, no hostname specified [pid: 21115]
Running "express-keepalive" task
The server start up fine and I can go to localhost:8000 to view my page. The watch task doesn't seem to start and when I make changes to app.js it doesn't restart. I basically want type grunt server and then when any changes happen to app.js, I want the server to restart. I've tried using the serverreload option, but I can't seem to get that to work either. I have also tried using express-restart (in place of express:livereload) in the watch:express task, but it says
Warning: path must be a string Use --force to continue.
After some playing around I was able to get it working, with an annoying issue. Here's the core of the Gruntfile:
var path = require('path');
module.exports = function (grunt) {
grunt.initConfig({
express: {
options: {
port: 8000,
hostname: '*'
},
livereload: {
options: {
server: path.resolve('./app.js'),
livereload: true,
serverreload: true,
bases: [path.resolve('./public')]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express');
grunt.registerTask('default', ['express', 'express-keepalive']);
};
However there seems to be an issue where a different port is used every other save. If the other server reload option is working I would stick with that for the time being.
As a side note, it appears this grunt plugin also listening on the port which means the start app.js should return itself with module.exports = app; rather than the default express http.createServer. It appears both will run simultaneously as long as different ports are specified.
I have been working on setting up a proxy with Grunt. I am able to connect to my Grunt server, but when I try to hit the proxy I get a 404. Here is my Gruntfile.js
"use strict";
module.exports = function(grunt) {
var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.initConfig({
connect:{
development: {
port: 9000,
base: 'app',
keepalive: true,
livereload: {
options: {
middleware: function() {
return proxySnippet;
}
}
},
proxies: [{
context: '/name',
host: 'http://99.42.222.76:3000/users.json',
changeOrigin: true
}]
}
}
});
grunt.registerTask('server', ['configureProxies', 'connect']);
};
I have tried to use this blog to help me set up everything, but I still am not having any luck. Thanks in advance.
At least part of the issue is that you don't want to use the full URL in the host: of the proxy configuration. According to the docs (https://github.com/drewzboto/grunt-connect-proxy), the host should not include the http.
Quote:
options.host
Type: String
The host to proxy to. Should not start with the http/https protocol.
I think the proxies section you want should look like the below. The host indicates the IP address or host name to proxy to, the port indicates the port to proxy to, and the rewrite indicates a translation from /name to /users.json.
proxies: [{
context: '/name',
host: '99.42.222.76',
port: 3000',
changeOrigin: true,
rewrite: { '^/name': '/users.json' }
}]
I setup Yeoman 1.0 beta to handle my js/css tasks. Everything works fine that, if I run grunt server, it starts up a static server and connects a browser session to port 9000 (livereload). js/css concat, minification are also working.
Now, is there a way I can make it to connect to a google app engine development server (instead of starting a static server). The server is running at port 8080 on localhost, and I want grunt to reload the webpage upon css/js files under watch. These files would be served by GAE server.
I see a section rolling your own at grunt-contrib-connect documentation, but not sure it means an external server. As far as I see, these are the relavent configuration from Gruntfile.js
connect: {
livereload: {
options: {
port: 8080, //*** was 9001 originally **
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
When I change the port number to 8080, and try to start, obviously it gives error.
Fatal error: Port 8080 is already in use by another process.
so, I don't want to start a new server, but connect through GAE server already running.
Thanks.
In order to use GAE server instead of nodejs server, we need to do the following.
* Compile your less/coffeescript, concat[, minify], copy your code to the location where the app engine code resides.
* Create a task in grunt.js to spawn a shell command to run app engine.
This is the example, that I used as reference. https://github.com/cowboy/grunt/tree/master/tasks
Following grunt.js file may help!
module.exports = function(grunt) {
grunt.initConfig({
....
});
grunt.registerTask('appengine-update', 'Upload to App Engine.', function() {
var spawn = require('child_process').spawn;
var PIPE = {stdio: 'inherit'};
var done = this.async();
spawn('appcfg.py', ['update', 'build/task-manager-angular'], PIPE).on('exit', function(status) {
done(status === 0);
});
});
grunt.registerTask('clean', 'Clean the whole build directory.', function() {
require('child_process').exec('rm -rdf build', this.async());
});
grunt.registerTask('run', 'Run app server.', function() {
var spawn = require('child_process').spawn;
var PIPE = {stdio: 'inherit'};
var done = this.async();
spawn('dev_appserver.py', ['.'], PIPE).on('exit', function(status) {
done(status === 0);
});
});
});
//....
//Other settings
//....
grunt.loadTasks('tasks');
grunt.loadNpmTasks('grunt-coffeelint');
grunt.registerTask('build', 'coffee less concat');
grunt.registerTask('deploy', 'coffee less concat build appengine-update');
grunt.registerTask('default', 'coffee less');
};
Found this Google App Engine management plugin for Grunt