# Kirby + Gulp + Browsersync + Sass

**URL:** <https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266>\
**Category:** Questions\
**Tags:** v2\
**Created:** [February 8, 2016, 8:48am UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266 "2016-02-08T08:48:19Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [February 8, 2016, 8:48am UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/1 "2016-02-08T08:48:19Z")

</div>

Hello.

Can someone share the gulpfile.js with these setup. Or can someone help me make the gulp task for browsersync that will work with kirby server.

I’m trying to do it but can’t get the browsersync part. I have gulp-sass working already.

Thank you.

---

<div class="post-metadata">

**Author:** ![PaulMorel](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/paulmorel/32/371_2.png) [@PaulMorel](https://forum.getkirby.com/u/PaulMorel)\
**Post date:** [February 8, 2016, 1:15pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/2 "2016-02-08T13:15:40Z")

</div>

[Here’s a good start.](https://raw.githubusercontent.com/PaulMorel/gatineau-kirby/feature-refactor/gulpfile.js?token=ABJQhaWl79AYBRGjGV0Qp0756jsXszaPks5Wwc5NwA%3D%3D)

I haven’t implemented browsersync yet, but I’m going to try to to that this week. However Browsersync’s docs are quite straight forward.

[https://www.browsersync.io/docs/gulp/](https://www.browsersync.io/docs/gulp/)

If you already have a development environment setup with your project (XAMPP, MAMP, WAMP, Vagrant or any other virtual host), you’ll have to use browsersync’s `proxy` setting.

[https://www.browsersync.io/docs/options/#option-proxy](https://www.browsersync.io/docs/options/#option-proxy)

Hope this helps!

---

<div class="post-metadata">

**Author:** ![PaulMorel](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/paulmorel/32/371_2.png) [@PaulMorel](https://forum.getkirby.com/u/PaulMorel)\
**Post date:** [February 13, 2016, 2:18am UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/3 "2016-02-13T02:18:35Z")

</div>

Update!

I made it work with Gulp + SASS + BrowserSync + MAMP + Wordpress. The process for Kirby would be the same, except your watched folders will probably change. Here’s my current `gulpfile.js`. It has a lot more than just SASS & BrowserSync, but we’ll concentrate on those.

> <https://gist.github.com/PaulMorel/2baa3519a15e4df9ea5c>

What we’re trying to do is run BrowserSync and watch for changes in the SASS folder, compile the SASS when changes are detected and reload the styles/browser. We also want to watch for changes in `.php` files.

First off, make sure you load and create an instance of BrowserSync.

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

```

I assume you’re using an virtual host to run your Kirby install and you already have a `gulp` `watch` task setup for your `sass` compilation. BrowserSync by default serves your content in it’s own virtual host, however it doesn’t come with PHP. We want to use our existing environment (XAMPP, MAMP, WAMP, Vagrant or any other virtual host) to serve Kirby and use BrowserSync on top of that.

Here’s my `watch` task. The principle is the same, except you should use your folder structure.

```auto
gulp.task('watch', function() {

  browserSync.init({
    injectChanges: true,
    proxy: 'localhost'
  });

  // Watch .scss files
  gulp.watch('/scss/{,*/}*.scss', ['styles']);

  // PHP Files
  gulp.watch('{,*/}*.php').on('change', browserSync.reload);
});

```

Essentially you’re initializing BrowserSync at the start of your `watch` task and reloading the browser when `.php` files are changed.

`injectChanges: true` makes it possible to change styles and scripts on the fly without reloading the whole makes. It’s slightly faster than reloading. To use this feature, you need to tell BrowserSync to stream the new content within the appropriate tasks.

```auto

gulp.task('styles', function() {
    return gulp.src(config.basePath.src + 'scss/{,*/}/*.scss')
        .pipe(plumber(function(error) {
            util.log(util.colors.red(error.message));
            this.emit('end');
        }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >= 10', 'and_chr >= 2.3'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./'))
        .pipe( gulp.dest( config.basePath.dev + 'css/' ) )
        .pipe( browserSync.stream({match: "**/*.css"}) );
});

```

The last line of the task tells BrowserSync to reload all the files that end with `.css` in the browser, and nothing else.

That’s all there is to it. Tell me if I wasn’t clear on some aspects.

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [February 13, 2016, 6:39am UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/4 "2016-02-13T06:39:30Z")

</div>

Thank you so much for this. Now I have a working dev environment with gulp. I have one new issue though, my panel keeps going back to the login page every now and then. This does not happen when I’m not using browser-sync to proxy my server. After I implemented gulp with browser-sync, my kirby panel keeps going back to the login page. Everything works though, it’s just annoying when adding some posts.  
Thank you again.

---

<div class="post-metadata">

**Author:** ![julieng](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/julieng/32/6770_2.png) [@julieng](https://forum.getkirby.com/u/julieng)\
**Post date:** [February 13, 2016, 3:08pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/5 "2016-02-13T15:08:07Z")

</div>

Hi, we have made and are using this for working with a friend: [https://github.com/julien-gargot/kirby-devkit](https://github.com/julien-gargot/kirby-devkit).  
The master branch is more up-to-date, but the others will be too as soon as possible 😉

---

<div class="post-metadata">

**Author:** ![PaulMorel](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/paulmorel/32/371_2.png) [@PaulMorel](https://forum.getkirby.com/u/PaulMorel)\
**Post date:** [February 13, 2016, 4:09pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/6 "2016-02-13T16:09:09Z")

</div>

You should be able to ignore the panel in BrowserSync’s `init` function.

```auto
  browserSync.init({
    injectChanges: true,
    proxy: 'localhost',
    snippetOptions: {
       ignorePaths: ["panel/**"]
    },
  });

```

I haven’t tested it, but it should work. There are a lot of other options. [https://www.browsersync.io/docs/options/](https://www.browsersync.io/docs/options/)

You should check out @julieng’s setup as it’s better geared towards Kirby instead of Wordpress like mine.

---

<div class="post-metadata">

**Author:** ![louis\_ev](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@louis\_ev](https://forum.getkirby.com/u/louis_ev)\
**Post date:** [February 13, 2016, 5:01pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/7 "2016-02-13T17:01:07Z")

</div>

Hi, I’m @julieng 's friend who is contributing to the kirby devkit.

I also have the panel issue with browsersync that @sicnarf described.

Here is the github issue I filled about it, maybe this will help with understanding the origin ??

> Tracked the bug a bit more :

> Everytime I login and modify a page, browsersync says in its output :  
> `[BS] File changed: site/accounts/louis.php`

> but if I disable the path in bold in the browsersync task, panel login stays operational and I am not getting this message anymore :  
> `browserSync.init({ files: [**'{site}/** /*.php'**, '*.php', userScripts, 'assets/less/*.less'], proxy: localDevUrl, });`

> So what I think is happening is that somehow browersync watching an account’s files is logging out a user.

> A user in the Kirby forum has suggested to use and ignorePaths (see  
> [Kirby + Gulp + Browsersync + Sass - #5 by julieng](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/5)) and I tried setting ‘site/accounts/\*\*’ as an ignore path but it’s not working.

---

<div class="post-metadata">

**Author:** ![PaulMorel](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/paulmorel/32/371_2.png) [@PaulMorel](https://forum.getkirby.com/u/PaulMorel)\
**Post date:** [February 13, 2016, 5:29pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/8 "2016-02-13T17:29:46Z")

</div>

`{site}/**/*.php` in the `init` function will check for changes in every `.php` file in `/site/` including `/accounts/`

`ignorePaths` in `snippetOptions` is to remove the BrowserSync script from the page.

I think you’d want to add `'!sites/accounts/**'` to your `files` array in `browserSync.init`.

Essentially you want to prevent `accounts` from triggering BowserSync and you want to prevent BrowserSync from realoding the panel when it’s triggered

I can always fork your repo, test it and do a pull request if I can fix it.

---

<div class="post-metadata">

**Author:** ![louis\_ev](https://avatars.discourse-cdn.com/v4/letter/l/bbe5ce/32.png) [@louis\_ev](https://forum.getkirby.com/u/louis_ev)\
**Post date:** [February 13, 2016, 6:13pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/9 "2016-02-13T18:13:50Z")

</div>

Thanks @PaulMorel, this is working just fine.  
The panel is now acting normal and keeping me logged in as usual. I just updated the devkit with this fix.

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [February 13, 2016, 6:53pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/10 "2016-02-13T18:53:46Z")

</div>

@PaulMorel Thank you! That solved the issue.

@julieng Thanks for sharing.

Aaaah, gotta love this community. First week with Kirby and have solved a lot even if it’s not kirby related.

Thanks again.

---

<div class="post-metadata">

**Author:** ![krisa](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/krisa/32/3415_2.png) [@krisa](https://forum.getkirby.com/u/krisa)\
**Post date:** [February 23, 2016, 1:00pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/11 "2016-02-23T13:00:46Z")

</div>

I would just like to point out that if you want to use gulp all the way (without MAMP etc) it is possible with

> **[micahblu/gulp-connect-php](https://github.com/micahblu/gulp-connect-php)**
>
> gulp-connect-php - Start a php server with gulp

I am not sure if it works on windows but we use it daily on mac.

Basic usage from examples:

```auto
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();
  });
});

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 23, 2016, 1:09pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/12 "2016-02-23T13:09:10Z")

</div>

In the future, pls. enclose blocks of code with three backticks at the beginning and at the end of your code block, this will highlight your code and make it much more readable. Thank you.

---

<div class="post-metadata">

**Author:** ![krisa](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/krisa/32/3415_2.png) [@krisa](https://forum.getkirby.com/u/krisa)\
**Post date:** [February 23, 2016, 1:33pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/13 "2016-02-23T13:33:27Z")

</div>

I am sorry, i was looking for it but there is no button in gui. The one which looks like code made it even worse (preformated text).

---

<div class="post-metadata">

**Author:** ![thguenther](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thguenther/32/16708_2.png) [@thguenther](https://forum.getkirby.com/u/thguenther)\
**Post date:** [June 2, 2016, 8:29am UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/14 "2016-06-02T08:29:50Z")

</div>

Sorry to dig up such an old thread.

I’m running the exact same setup and have a _similar_ but not exactly _identical_ issue. The panel logs me out not when I’m changing any file but when I’m navigation to another page in the frontend.

@sicnarf If you’re still running this setup, do you have the same issue?

Thank you!

---

<div class="post-metadata">

**Author:** ![Meuss](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/meuss/32/1488_2.png) [@Meuss](https://forum.getkirby.com/u/Meuss)\
**Post date:** [June 3, 2016, 12:18pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/15 "2016-06-03T12:18:08Z")

</div>

I am also still encountering the same issue, I can’t seem to fix it. Could anyone show your working gulpfile, which browsersync doesn’t make you log out of the panel whenever you navigate on another page/ change any files?

Here is mine, which is causing me problems:  
[gulpfile.js](https://gist.github.com/Meuss/72aebb34bf69296b22c2fadfce652acd)

---

<div class="post-metadata">

**Author:** ![thguenther](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thguenther/32/16708_2.png) [@thguenther](https://forum.getkirby.com/u/thguenther)\
**Post date:** [June 3, 2016, 12:35pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/16 "2016-06-03T12:35:20Z")

</div>

Alright, so I am not the only one.

I’ve set my MAMP to \*.dev now and use browserSync on localhost. That way it works. It may not be that convenient, since you can’t use multiple instances but it’s better than logging in every minute.

---

<div class="post-metadata">

**Author:** ![Meuss](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/meuss/32/1488_2.png) [@Meuss](https://forum.getkirby.com/u/Meuss)\
**Post date:** [June 3, 2016, 1:24pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/17 "2016-06-03T13:24:17Z")

</div>

What does setting mamp to \*.dev mean? Is this something on MAMP Pro?

---

<div class="post-metadata">

**Author:** ![thguenther](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/thguenther/32/16708_2.png) [@thguenther](https://forum.getkirby.com/u/thguenther)\
**Post date:** [June 3, 2016, 1:36pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/18 "2016-06-03T13:36:59Z")

</div>

That may not be well-worded. I’ve added hosts in MAMP that are “project1.dev”, “otherproject.dev”, …

You can use whatever server name you want, though. I think it’s just important to have a different one that browsersync uses. But I don’t know.

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [June 3, 2016, 6:48pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/19 "2016-06-03T18:48:27Z")

</div>

Here’s my current task for the gulp browsersync.  
It does logout from time to time but not the same as before that every edit I make logs me out. As suggested above I added the option “ignorePaths”.  
My current best solution was to use safari for my panel, and chrome for the front-end.

// ////////////////////////////////////////////////  
// Server  
// ////////////////////////////////////////////////

```
gulp.task('browser-sync', ['sass'], function() {
  browserSync.init({
    proxy: 'localhost:8888/project1.com',
    browser: ['google chrome'],
    notify: false,
    snippetOptions: {
      ignorePaths: ['panel/ **', 'site/accounts/**']
    },
  });
});
```

---

<div class="post-metadata">

**Author:** ![Meuss](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/meuss/32/1488_2.png) [@Meuss](https://forum.getkirby.com/u/Meuss)\
**Post date:** [June 3, 2016, 11:13pm UTC](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266/20 "2016-06-03T23:13:14Z")

</div>

Ok, I guess I’ll stop trying to fix this. I hadn’t thought of having safari open for the panel, it works fine. Thanks for the tip!

[Next page](https://forum.getkirby.com/t/kirby-gulp-browsersync-sass/3266.md?page=2)