Using browser-sync to Reload Page on CSS changes

Question

I'm using Basscss on a project and trying work out how to set up a task in Gulp that will refresh my browser when I make changes to my .scss file.

The current gulpfile.js looks like this and I was thinking of using Browser Sync to do this. Except I'm not sure how to implement this since this framework uses Swig templates.

I was thinking of doing something like this, but this doesn't seem to work.

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

gulp.task('bs-reload', function () {
    browserSync.reload();
});

gulp.task('watch-css', ['basswork', 'site-basswork', 'customizer-data'], function() {
  gulp.watch([
    './src/**/*.css',
    './docs/src/css/**/*.css'],
    ['basswork', 'site-basswork', 'customizer-data', 'bs-reload']);
});

If anyone could lend any help to me regarding this, I'd really appreciate it.

Thanks in advance!

realph · Accepted Answer · 2015-01-02 18:25:15Z

2

Ending up solving it like so:

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

gulp.task('browser-sync', function(){
  browserSync({
    server: {
      baseDir: "./"
    }
  });
});

gulp.task('sass', function() {
  gulp.src(['./scss/*.scss'])
  .pipe(sass({
    outputStyle: 'expanded'
  }))
  .pipe(gulp.dest('./css'))
  .pipe(minifycss())
  .pipe(gulp.dest('./css'))
  .pipe(reload({stream: true}));
});

Now every time I make a change to my .scss files, the browser is refreshed with the updated CSS. Hope this helps someone.

answered Jan 2, 2015 at 18:25

realph

4,71114 gold badges52 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marko Gresak · Accepted Answer · 2015-01-02 16:35:28Z

0

Where are you starting the server? Did you try to follow official docs?

You have to set up task similar to this:

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

You don't need a task to reload browser-sync, every time you call this task, it will either create server if it's not running, or sync/reload files.

And on watch, you can just add browser-sync task to the array of called tasks, similar to what you're doing now:

gulp.task('watch-css', ['basswork', 'site-basswork', 'customizer-data'], function () {
    gulp.watch([
        './src/**/*.css',
        './docs/src/css/**/*.css'
    ], ['basswork', 'site-basswork', 'customizer-data', 'browser-sync']);
});

answered Jan 2, 2015 at 16:35

Marko Gresak

8,2676 gold badges43 silver badges49 bronze badges

8 Comments

realph Over a year ago

I'm a bit confused about this because it looks like a server is being started on line 31. Wouldn't these servers conflict?

Marko Gresak Over a year ago

Line 31? What do you mean?

realph Over a year ago

I linked the current gulpfile in the question (github.com/jxnblk/basscss/blob/master/gulpfile.js). Line 31 has a task called serve.

Marko Gresak Over a year ago

Why are you creating gulp-webserver? Browser-sync will make a server for you.

Marko Gresak Over a year ago

tasks/serve.js:6 is creating a server from ./ (current folder), relative to gulpfile.js. AFAIK you have to precompile any templates, you can use gulp-swig to automate this. After you have compiled files, any static server (gulp- webserver, connect, livereload, browser-sync, etc.) will work the same, you provide server root, and it translates the path from browser to server root and returns corresponding file.

|

Collectives™ on Stack Overflow

Using browser-sync to Reload Page on CSS changes

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related