Using Gulp with connect-php and Browser Sync

The CMS Questions
1

I’m trying to use Gulp with php-connect server and browsersync.

This is my gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

var paths = {
    css: 'assets/sass/**/*.scss',
    php: '**/*.php'
};

gulp.task('connect-sync', function() {
    return connect.server({}, function (){
        browserSync({
            proxy: 'localhost:8000'
        });
    });
});

gulp.task('css', function() {
    return gulp.src(paths.css)
    .pipe(sass({
        outputStyle: 'expanded',
        indentWidth: 4
    })
    .on('error', sass.logError))
    .pipe(postcss([ autoprefixer({
        browsers: ['last 2 versions']
    }) ]))
    .pipe(gulp.dest('assets/css/'))
});

gulp.task('watch', function() {
    gulp.watch(paths.php).on('change', browserSync.reload);
    gulp.watch(paths.css, ['css']).on('change', browserSync.reload);
});

gulp.task('default', ['connect-sync', 'css', 'watch']);

(I’m using a Mac with Gulp version: 3.9.1.)

Everything works fine excepting browser reload.

Any idea on how to fix it?

2

Do you get the browsersync script added to the page?

Immediately after the body tag, you should see something like (do an inspect in the browser, not a view source):

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.13'><\/script>".replace("HOST", location.hostname));
//]]></script>
<script async="" src="/browser-sync/browser-sync-client.js?v=2.18.13"></script>

It is this that does the reloading. If your html is bad, it causes this script not to get added to the page. Is your body tag ok? Everything opened and closed properly?

What happens if you visit browsersyncs UI? (usually on port 3001 unless you changed it)

Personally i gave up on Gulp along time back because i was wasting to much time maintaining 1,200+ lines of code that built my project instead of building the project. Much easier to NPM scripts like my boilerplate.

3

…and this is why I gladly spent $35 on Codekit… :wink:

When you have to choose between spending 2 hours at the beginning of every project fighting with gulp/grunt/webpack or (literally) 5 minutes with Codekit, it’s a no-brainer.

4

Unless you live where i live. I used Codekit for while, tried to upgrade and I couldn’t because the developer decided to only accept payments from the US. I posted a support request, never get an answer, soooo he no longer gets my money.

5

Wow, @jimbobrjames, so sad to hear it! He is actually pretty well known for being responsive and overall a nice guy. Try reaching out to him via Twitter, or social media, or posting an issue in the Github repo - you will certainly get a reply.

Also, might be worthwhile trying again. I certainly don’t live in the US, and had no issues with payment. :+1:

6

Sure, I mean no disrespect to the guy, it’s a great piece of kit. I just couldn’t upgrade from version 1 to version 2 because his payment form wouldnt accept a credit card with an address outside of the United States. Frustrating but it was a couple of years back and i’ve moved on to NPM scripts / Laravel mix now.

7

@11bits Try launching tasks from separate watch rules. Remember that Gulp runs things in parallel and does not wait for other tasks to finish even though a task might fail if thats true. I just dug up my old gulp pipeline and it looks like this…

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

browserSync(config.browserSync);

    watch(config.styles.sass.src, function() {
        gulp.start('assets:styles');
    });

    watch(config.assets.scripts.watch, function() {
        gulp.start('assets:scripts');
    });

...

});

You get the idea. Im using gulp-watch instead of the the built in watch which is a bit fussy and not very good.

my browsersync rule was set to watch all files in the destination:

 browserSync: {
    proxy: localhost:8000,
    notify: false,
    files: [dest + '/**/*']
  }

Try using run-sequence to make sure your tasks run in the right order.

8

Nor me, the guy has always been very responsive and no problem with payments from outside the US, either. Been using Codekit on and off depending on project for a couple of years without any problem.

9

@luxlogica I understand you, some years ago I used PrePros. Task runners are not so bad. When you find a working setup you can reuse it on every project until you need to change something… Anyway, I will take a look at CodeKit.

@jimbobrjames thank you for your tips. After some tests, I found the solution. I had to change the hostname from ‘localhost’ to ‘127.0.0.1’ and now browser sync works fine.

10

Interesting. I tried for about a week to upgrade, and sent numerous support requests (via email) and never got an answer. I had work to do and couldn’t waste any longer. I see that PayPal and Apple Pay are now excepted, so maybe it will work for me now.

I tried Koala for a while and PrePros but it neither lived up to CodeKit.