I'm trying to implement BrowserSync in Laravel with elixir. So the browser updates itself on every save i make in my .scss file
To simulate the php server
php -S localhost:8888 -t public // executed from project folder with git bash
Gulp.js File
var gulp = require('gulp');
var elixir = require('laravel-elixir');
var browserSync = require('browser-sync').create();
elixir(function(mix) {
mix.browserSync({
base: './public',
proxy: 'localhost',
port: 8888
});
});
Everything runs ok. When i use gulp watch the function is watching my files and notices that styles.scss in the folder public/css/ updated. But my browser on localhost:8888 is not refreshing with the new css generated from the style.scss. Can someone suggest the changes I have to make to make this thing work?
Had to change a few things:
Simulate PHP server with following command:
php artisan serve --host=127.0.0.1
Gulp.js
elixir(function(mix) {
mix.browserSync({proxy: 'localhost:8000'});
});
This code is enough to let it run. Feel free to post suggestions.
I would like to use Browsersync with PHP, but I can't seem to get it to work properly.
Currently I am using Gulp. Is it possible to either use Browsersync with XAMPP/MAMP, or use a Gulp plugin to read .php files?
use gulp-connect-php
npm install --save-dev gulp-connect-php
then setup you gulpfile.js
var gulp = require('gulp'),
connect = require('gulp-connect-php'),
browserSync = require('browser-sync');
gulp.task('connect-sync', function() {
connect.server({}, function (){
browserSync({
proxy: '127.0.0.1:8000'
});
});
gulp.watch('**/*.php').on('change', function () {
browserSync.reload();
});
});
see documentation https://www.npmjs.com/package/gulp-connect-php
Also there is a good tutorial here https://phpocean.com/tutorials/front-end/automate-your-workflow-with-gulp-part-3-live-reloading/23
I have the same situation for a few days until I figure out that it happens because I didn't close my html output properly. BrowserSync needs to include some javascript text before to reload the browser. If the html, body tags are NOT closed or NOT present, BrowserSync has nowhere to include the script.
A proxy option is now available in browser-sync when using an external server.
Config docs : https://browsersync.io/docs/options#option-proxy
// Using a vhost-based url
proxy: "local.dev"
// Using a localhost address with a port
proxy: "localhost:8888"
// Using localhost sub directories
proxy: "localhost/site1"
Command line : https://browsersync.io/docs/command-line#start
browser-sync start --proxy "localhost:8080" --files "**/*"
I'm trying to use Elixir BrowserSync, one of the newest features of Laravel.
I added it to the gulp file
elixir(function(mix) {
mix.sass('app.scss')
.browserSync();
});
when I run "gulp watch" it output this message
[20:49:20] Using gulpfile ~/Desktop/laravel/gulpfile.js
[20:49:20] Starting 'watch'...
[20:49:20] Finished 'watch' after 11 ms
[BS] Proxying: http://homestead.app
[BS] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://10.9.0.48:3000
Automatically a browser is launched with the url http://localhost:3000 but nothing loads.
I think the problem is related to this line:
[BS] Proxying: http://homestead.app
You can if you use BrowserSyncs server.
mix.browserSync({
proxy: false,
server: {
baseDir: './'
}
});
Are you running multiple homestead sites? It looks like it defaults to proxying through homestead.app if you do not include a proxy setting. If you don't host your local on homestead.app it won't find it.
Try
.browserSync({ proxy: 'domain.app' });
Where domain.app is what you are serving the site with.
The direct answer to your question - it is not possible to not proxy the .browserSync. Long side-answer - you can still use elixir's implementation of browserSync in gulp, but you must have a separate PHP server to interpret the files.
Edit: I saw a way to not proxy by providing the script in the pages manually (by not giving any arguments in the .browserSync() call, but don't remember where and how to do it exactly.
The reason is that browserSync requests all the data from the server for you, injects a little javascript listener and displays everything else:
<script type='text/javascript' id="__bs_script__">//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.2.9.11.js'><\/script>".replace("HOST", location.hostname));//]]></script>
One way is to php artisan serve --host=0.0.0.0 in a separate terminal to start up the server and then use the .browserSync({proxy: 'localhost:8000'}). It all works - the BrowserSync UI and all the calls to refresh the pages.
Note: I could not connect to artisan serve without the --host=0.0.0.0.
For those wanting an all automated solution via gulp, here it is:
Use the gulp packages gulp-connect-php and laravel-elixir-browsersync2. The first starts up the php artisan serve and the other connects it to browserSync.
Install the packages:
npm install laravel-elixir-browsersync2 --save-dev
npm install gulp-connect-php --save-dev
Add the required lines to your gulpfile.js:
Code:
var elixir = require('laravel-elixir'),
gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var BrowserSync = require('laravel-elixir-browsersync2');
elixir(function(mix) {
mix.sass('app.scss');
});
elixir(function(mix) {
connectPHP.server({
base: './public',
hostname: '0.0.0.0',
port: 8000
});
BrowserSync.init();
mix.BrowserSync(
{
proxy: 'localhost:8000',
logPrefix : "Laravel Eixir BrowserSync",
logConnections : false,
reloadOnRestart : false,
notify : false
});
});
Then - simply gulp.
Disclaimer: This might not work with the gulp watch, but there might be people with the answer to that.
There is also a line PHP server not started. Retrying... before the [Laravel Eixir BrowserSync] Proxying: http://localhost:8000. It belongs to gulp-connect-php when trying to check if the server is running.
I found other solution on laracast for Bloomanity and it works with me like a charm!
$ php artisan serve --host=0
and then in your gulp add:
mix.browserSync({proxy: 'localhost:8000'});
I am trying to use/run Google Web-Starter-Kit with PHP code and surfing through internet I found gulp-connect-php which helps to run PHP files inside gulp server(we can connect gulp with our local php service). So that i installed gulp-connect-php and added the following code to gulpfile.js
code:
var connect = require('gulp-connect-php');
gulp.task('connect', function() {
connect.server({
hostname: '0.0.0.0',
bin: 'C:/wamp/bin/php/php5.5.12/php.exe',
ini: 'C:/wamp/bin/php/php5.5.12/php.ini',
port: 8000,
base: 'dev'
});
});
gulp.task('default', ['connect']);
and entered the below command to execute gulp server with gulp-conntect
>gulp connect
but it throwing some ERROR with path i specified for PHP applicatoin.
ERROR:
E:\my-project>gulp connect
[10:51:57] Using gulpfile E:\my-project\gulpfile.js
[10:51:57] Starting 'connect'...
[10:51:57] Finished 'connect' after 12 ms
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn C:/wamp/bin/php/php5.5.12/php.exe ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
I don't know where the issue lies on. please help on this.
An ENOENT error usually indicates that a file or directory is missing. Seeing that you are on windows, this would most likely be due to a wrong direction of slashes.
Try
bin: 'C:\\wamp\\bin\\php\\php5.5.12\\php.exe'
(same for ini) and make sure this file really exists! Other than that, if you can call php directly from your command line, you shouldn't need to point to the EXE file at all.
My main goal here is to adapt Yeoman's gulp-webapp development workflow to run PHP.
Specifically, I want to be able to use gulp-php-connect with multiple base directories (for the compiled CSS from Sass) and routes (for Bower dependencies), if that's even possible.
I'm able to run PHP with Gulp using the gulp-connect-php plugin, like this:
gulp.task('connect-php', function() {
connectPHP.server({
hostname: '0.0.0.0',
bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php',
ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini',
port: 8000,
base: 'dev'
});
});
However, I'd like to take advantage of gulp-webapp's excellent but quite entangled development workflow architecture, which relies on BrowserSync, Sass compiler (compiles to a .css file into a .tmp folder, for development), auto-prefixer, and uses a bunch of other useful plugins.
Here's the part of it that I would like to adapt to use gulp-connect-php or any other PHP :
gulp.task('serve', ['styles'],function () {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp', 'app'],
routes: {
'/bower_components': 'bower_components'
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles', reload]);
gulp.watch('bower.json', ['wiredep', 'fonts', reload]);
});
BrowserSync has a proxy option, that allows me to run it with gulp-connect-php server, which is pretty amazing. But I need gulp-connect-php it to use multiple base directories and routes, like BrowserSync does.
So far I've come up with this:
gulp.task('serve-php', ['styles','connect-php'],function () {
browserSync({
proxy: "localhost:8000"
});
// watch for changes
gulp.watch([
'app/*.php',
'app/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles, reload]);
gulp.watch('bower.json', ['wiredep', 'fonts', reload]);
});
To temporarily fix the multiple base directories issue, I tweaked the styles task so it stores the compiled .css to /app instead of .tmp/. I'd prefer to have it on a temp folder though, because I don't need that compiled .css file hanging around there with my Sass files.
For the routes issue, I'm trying to tell wiredep plugin to change a path, say, from bower_components/jquery/dist/jquery.js to ../bower_components/jquery/dist/jquery.js, with no success.
All I could do was manually rename the paths in index.php, and it still doesn't work. When running gulp serve I get:
/bower_components/jquery/dist/modernizr.js - No such file or directory
...even though I changed the path in index.html to ../bower_components/jquery/dist/jquery.js.
I believe that doesn't work because the gulp-connect-php server can't see what's outside the base folder.
I'm trying different things, and though I've been pretty vague on this thread's title, I think that the cleanest solution would be to run multiple base directories and routes with gulp-connect-php, but I don't know if that's possible.
I spent a while trying to work this one out, but have a working solution now. The way I solved is was to use BrowserSync as the server, and added a middleware that proxies requests if they don't match a pattern...
Install the http-proxy package...
$ npm install --save-dev http-proxy
Add the proxy package to the top of the gulpfile.js...
var httpProxy = require('http-proxy');
Add a separate php server and a proxy server before the BrowserSync...
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
// ...
Then add the middleware for the server to see if the request needs to be proxied...
// ...
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/bower_components': 'bower_components'
},
// THIS IS THE ADDED MIDDLEWARE
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
} else {
next();
}
}
}
// ...
And here's the full tasks for completeness...
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
port : 9000,
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/bower_components': 'bower_components'
},
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
} else {
next();
}
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/*.php',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
Hope this saves you all the time I spent working this out! :o)
FWIW, I've got a quite simple and fair solution for that by placing the compiled .css file in the app/ root and moving /bower_dependencies folder inside the app/ folder.
For Sass, I only needed to change the path in the placeholder to <!-- build:css styles/main.css --> and change the dest in the styles task.
For the bower_components, I just edited bower_components in .bowerrc:
{
"directory": "app/bower_components"
}
and added this to the wiredep stream in gulpfile.js:
fileTypes: {
scss: {
replace: {
scss: '#import "app/{{filePath}}";'
}
}
},