I have read enough about live-server and browsersync .. however i can't quiet get my head around how they work together.
browserSync's job is to sync all browser and live-server's job is to restart my express server.
so how does the below task help in my work flow:
gulp.task('live-server', function() {
var server = new LiveServer('server/main.js');
server.start();
});
gulp.task('serve', ['live-server'], function() {
browserSync.init(null, {
proxy: 'http://localhost:7777',
port: 9001
});
});
The output that I get when i run gulp serve is
[09:31:05] Using gulpfile ~/Documents/Code/test/gulpfile.js
[09:31:05] Starting 'live-server'...
[09:31:05] Finished 'live-server' after 8.55 ms
[09:31:05] Starting 'serve'...
[09:31:05] Finished 'serve' after 60 ms
livereload[tiny-lr] listening on 35729 ...
[BS] Proxying: http://localhost:7777
[BS] Access URLs:
-------------------------------------
Local: http://localhost:9001
External: http://172.20.3.230:9001
-------------------------------------
UI: http://localhost:3001
UI External: http://172.20.3.230:3001
------------------------------------
What is this external and what is UI external with all new ports 9001, 3001 ??
Local: represents the address on your local machine with which you can view the project.
External: represents the address that any user on you local network(LAN or wifi) can view the project.
UI gives you a bird's eyeview of all BrowserSync options, it shows you all sync options, history, and it lets you configure BrowserSync. To access the UI, just visit the address referenced on your terminal as UI.
The bellow link will detail more about it:
How to Use BrowserSync for Faster Development
Related
I have searched around but no posts pinpointed the pitholes to avoid when using Gulp's BrowserSync with a localhost testing environment. So here is this post.
I am using gulp browser-sync, doing testing with MAMP. Right now I cannot get my browser-sync watch to work. I want to reload browser whenever I save my files.
Under MAMP settings,
Apache port: 80
Nginx port: 80
MySQL port: 3306
gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync'); // create a browser sync instance.
//tasks for development
// Start browserSync server
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: "app"
},
proxy: "localhost:8080" // can be [virtual host, sub-directory, localhost with port]
});
gulp.task('watch', ['browserSync'], function () {
gulp.watch('app/*.{php,css,js}', browserSync.reload);
});
Since we are talking about MAMP here, my directory is in htdocs/test as shown below:
Also, my index.php file is inside /app
I am thinking I have made mistakes on many levels but right now any combination of my solutions doesnt seem to help and Ive spent hours on this. Any suggestions?
Finally got it to work.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('default', function() {
browserSync.init({
proxy: "http://localhost/test/app"
});
gulp.watch("./app/*.php").on("change", browserSync.reload);
});
Few things to look out for that the documentation might not explicitly mention:
Do not miss out .create and .init() as we are referring to an instance here.
If you are using some test local server like MAMP, be careful to use 'proxy' instead of 'server'.
Note the URL address I am using refers to the position of the index.php
Lastly, '.on("change", browserSync.reload)' to RELOAD on CHANGE.
Hope my day spent on this saved you some time.
I was struggling with this and found an updated solution that works w/ both MAMP and custom local dev proxies.
In the gulpfile.js gulp.task( 'browser-sync', function() block I removed:
browserSync.init( cfg.browserSyncWatchFiles, cfg.browserSyncOptions );
and replaced with
browserSync.init({
proxy: "your/local/dev/url/here"
});
Hope that saves someone some time!
Have a simple rack based server running on localhost:9292
And gulp task to proxy this address..
gulp.task('browser-sync', function() {
browserSync.init({
proxy: 'localhost:9292',
port: 4000
});
});
On the CLI we get this..
[17:36:34] Starting 'browser-sync'...
[17:36:34] Finished 'browser-sync' after 9.75 ms
[BS] Proxying: http://localhost:9292
[BS] Access URLs:
Local: http://localhost:3000
External: http://192.168.1.218:3000
UI: http://localhost:3001
UI External: http://192.168.1.218:3001
And....Nothing. No error message, the browser just spins and nothing happens.
Based on these BrowserSync instructions, it appears that this is all I need to do.
Gulp version 3.9.1
Node v6.3.1
browser-sync 2.14.0
I'm new to Gulp and BrowserSync, so I've been running gulp and stopping (forced by ctrl + z in terminal) it many times. Every time I start gulp again in terminal, BrowserSync gives me a new PORT number.
I need help removing the old instances of BrowserSync. Is there a command in terminal where I can view and delete old BS instances? Is this even possible?
I started BS at port 3001 (Local) and 3002 (UI) and now I'm at 3018! I want to go back to 3001.
Also, how can I fix my Gulpfile.js code so when I force stop gulp in terminal, browserSync exits Local and UI server instances, so the port number doesn't keep increasing?
My BrowserSync portion in Gulpfile.js is very basic:
gulp.task('browser', function () {
// Serve files from root of this folder
browserSync({
server: {
baseDir: './'
}
});
gulp.watch(['html/*.html', 'js/*.js']).on("change", reload);
});
gulp.task('default', ['styles','browser'], function() {
gulp.watch('./sass/**/*.scss', ['styles']);
});
In my mac Terminal, the latest BS instance is at 30018, and UI happens to be at 3021 (because I recently used bs.server.close(), which closes Local instance, but not the UI instance.
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3018
External: http://192.168.1.164:3018
--------------------------------------
UI: http://localhost:3021
UI External: http://192.168.1.164:3021
--------------------------------------
[BS] Serving files from: ./
^Z
[16]+ Stopped gulp
The issue is ctrl + z only suspends the process. (see https://superuser.com/a/262948)
What you want is ctrl + c, which will kill it.
First, close your terminal, this should kill any port connections still active in the background.
Next, restart your server, but use ctrl + c to exit. You should be able to stop and restart continuously using this method.
Unfortunately, grunt-contrib-watch and grunt-contrib-connect don't seem to be playing nice.
On the grunt-contrib-connect readme it says:
Note that this server only runs as long as grunt is running. Once grunt's tasks have completed, the web server stops. This behavior can be changed with the keepalive option, and can be enabled ad-hoc by running the task like grunt connect::keepalive.
Fine. But what if I want to run my watch task in tandem with the connect server? Like so:
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
keepalive: true
}
}
},
watch: {
options: {
livereload: true
},
files: ['**'],
tasks: ['connect'],
}
Here, the connect task runs when a file is changed. If I set the connect's keepalive option to true, then grunt-contrib-watch stops watching because it technically hasn't finished it's task. If I falsify the keepalive option, then the connect server dies after it has finished the tasks.
Yes, I could run the commands...
$ grunt connect
$ grunt watch
...in separate shells, but is there no way of running them with one command?
Livereload in grunt-contrib-watch informs for changes in files at a port here below you can see it is at 35729.
On the other hand the livereload in grunt-contrib-connect listens for changes at the port 35729.
So we should should configure them as -
connect: {
server: {
options: {
port: 8000,
hostname: 'localhost',
livereload: 35729
}
}
},
watch: {
options: {
livereload: 35729
},
files: ['**'],
tasks: []
}
You need not provide "connect" as a task here. As the work of reloading is done by livereload here.
Now to make these two work with a single command we will register them as -
grunt.registerTask("server", ["connect", "watch"]);
Now the connect is run and then watch is run. Now normally registerTasks works by finishing the first task then the second task and so on. But due to the behaviour of connect as stated by you -
Note that this server only runs as long as grunt is running
Connect is run only once. But watch will keep on running looking for changes (keeping grunt running) and thus keeping the connect server up.
Now when you try
grunt server
things will work like a charm.
I use grunt-nodemon, which encapsulates watch and a nodejs launcher in a single task:
nodemon: {
dev: {
script: 'app.js',
options: {
ignore: [
'node_modules/**',
'public/**'
],
ext: 'js'
}
}
}
Then executed with:
$ grunt nodemon:dev
Now, nodemon only launches the app.js script with nodejs, so you will need a small app.js to load a static static express server:
var express = require('express');
var server = express(); // better instead
server.configure(function(){
server.use(express.static(__dirname + '/public'));
});
server.listen(3000);
I created a node env using nitrous.io. Inside of their terminal I installed yeoman.
If I try to run grunt server I get an error stating:
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:
http://gruntjs.com/getting-started
If i go to preview than connect to port 3000 i get this
The Reference states for node to change 127.0.0.1 or "localhost" to 0.0.0.0
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(3000, '0.0.0.0');
console.log('Server running at http://0.0.0.0:3000/');
Grunt syntaxes are a bit different for a server
connect: {
options: {
port: 3000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '0.0.0.0' //
},
Even after this change the errors persist. Failing when I run grunt server or go to preview port 3000
Any ideas on what I'm doing incorrect? How do I run my grunt server so I may see my site in the broswer?
Have you gone through the advice on the first error message you got? You need both Gruntfile.js and package.json (with Grunt listed as a dependency); this is covered in the official documentation. Then, by running npm install you will be able to pull down a local Grunt to your project.
To summarize the comments this worked for me:
gem install sass; gem install compass
yo webapp
Edit Gruntfile.js around line 43:
connect: {
options: {
port: 3000, // <- changed this line
livereload: 35729,
hostname: '0.0.0.0' // <- changed this line
Run grunt server and click on the Preview-Button / Port 3000.