Kirby + Gulp + Browsersync + Sass

Kirby 2 Solved ✅
1

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.

2

Here’s a good start.

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/

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

Hope this helps!

1 Like
3

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.

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.

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.

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.


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.

2 Likes
4

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.

5

Hi, we have made and are using this for working with a friend: 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 :wink:

1 Like
6

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

  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/

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

7

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) and I tried setting ‘site/accounts/**’ as an ignore path but it’s not working.

8

{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.

9

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.

10

@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.

11

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

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

Basic usage from examples:

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

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.

13

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).

14

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!

15

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

16

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.

17

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

18

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.

19

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/**']
    },
  });
});
20

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!