Grunt Connect Server CSS files are blank - javascript

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'
]);

Related

Grunt connect (grunt-contrib-connect) livereload: Fatal error: Port 8000 is already in use by another process

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.

how to live reload gulp.js browsersync on dynamic content change

I have setup gulp.js to live reload in my browser. First of all here's how my gulpfile looks like
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:5000",
files: ["public/**/*.*", "views/**/*", "server.js"],
port: 7000,
});
});
now whenever I change something in my views/ or public/ directory the live reload works. However, whenever I tried to change something in my server.js the live reload will not work. Not sure what it is doing this. Please point me to the right direction. Thank you
Try it this way:
browserSync.init({
files: ["public/**/*.*", "views/**/*"],
port: 7000,
server: 'server.js'
});

Cannot GET / with gulp-connect-php

I'm using gulp-connect-php to try and run a php server locally with BrowserSync. Here's my gulp config file:
var gulp = require('gulp'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
server: {
baseDir: "app"
},
// proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
gulp.task( 'default', [ 'connect-sync' ] )
The above code works when I have a index.html file in my app directory but when I replace it with an index.php file I get the following message:
Cannot GET /
Not exactly sure what i've done wrong here?
What I understood from your question is that php serve is not recognizing .php files. There are 2 ways to get this work.
Apache (httpd.conf), search for DirectoryIndex and replace the line with this (will only work if you have dir_module enabled, but that's default on most installs) or add index.php
DirectoryIndex index.php index.phtml index.html index.htm
or
Create a .htaccess file in your web root.
Add the line...
DirectoryIndex index.php
Hope this helps!
You need to declare a index filename, add and index object to server.
...
browserSync({
server: {
baseDir: "app",
index: "/index.php"
},
});
...
You could also set browserSync startpage to /index.php instead of /
Edit I couldn't get startPath to work, so use index as in the example above.
...
browserSync({
server: {
baseDir: "app"
},
startPath: "/index.php"
});
...
#pramod-patil I don't think Apache directions will help here, since browserSync doesn't use Apache for serving PHP.

grunt connect exits instead of serving local files

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

Yeoman to use google app engine server

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

Categories

Resources