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'
});
Related
My application is running on port 8000. I have changed the borowserSync port to 8000 from browser-sync/default-config.js. And it looks something like this
// Change the default project
ui: {
port: 8000
},
ui: {
port: 8000,
weinre: {
port: 8000
}
},
but when I ran gulp watch command it spins the server on port 8001.
my terminal looks like this after I ran gulp watch command
[23:40:54] Starting 'browserSync'...
[23:40:54] Finished 'browserSync' after 23 ms
[23:40:54] Starting 'sass'...
[BS] Access URLs:
------------------------------------
Local: http://localhost:8001
External: http://192.168.1.6:8001
------------------------------------
UI: http://localhost:8002
UI External: http://192.168.1.6:8002
Does anyone know who to change the port in browserSync.
This kind of shifting by 1 normally happens when there is something else running on the port. Do you have another instance that is already occupying port 8000?
I notice that you have port 8000 mentioned twice in your config file and you have two of the same node for ui
My config for gulp looks like this for example
browserSync.instance = browserSync.init({
startPath: '/',
ui: {
port: 3001
},
server: server, //server variable set elsewhere
port: 3000,
browser: browser, //set elsewhere
});
So your config should look more like
{
port: 8000,//Or whatever port you want for your application
ui: {
port: 8001 //Or whatever port you want for browsersync ui
}
}
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.
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 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