Jump to content

What's wrong with my code (trying to make Browsersync work on Gulp)?


Matros

Recommended Posts

Hello,

I was trying to make Browsersync work with Gulp to be able to see coding changes in real time. I installed Browsersync and Gulp successfully, created gulpfile.js and put this code in. What is wrong with this code?

It does launch the server when I run command in terminal (browser-sync start --server --files "css/*.css"), but it doesn't reload or refresh when I make a change to a CSS file.


var gulp = require('gulp');

var browserSync = require('browser-sync').create();

gulp.task('default', function() {

// place code for your default task here

browserSync.reload({

proxy: "my_project.dev",

files: "*.css,*.php,css/*css"

});

});

Link to comment
Share on other sites

I would review their API a bit more, you seem to be mixing things up.

 

If you need it, proxy goes in the init method

https://www.browsersync.io/docs/api#api-init

https://www.browsersync.io/docs/gulp#gulp-install

 

reload is for updating browsers about changed files

https://www.browsersync.io/docs/api#api-reload

 

You probably want to follow something more like this example

https://www.browsersync.io/docs/gulp#gulp-sass-css

 

Maybe something closer to

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
 
gulp.task('serve', function() {
 
  browserSync.init({
    server: "./app"  // your doc root, source code, build output, whatever
  });
 
  //the files to watch for changes, to trigger browserSync
  gulp.watch(["./app/*.html", "./app/*.css"]).on('change', browserSync.reload);
});
 
gulp.task('default', ['serve']);

though knowing more about your project structure (since I see PHP in there) would be helpful, re: your doc root, or www, etc output

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...