setup to work with foundation 6 browser sync?

[simonlacey]

Hello, I am using foundation 6 for sites. I have customized the gulpfile to export php files. That's all good. The only thing I can't figure out is how to install gulp-connect-php to foundation 6 and get it watching with browser sync.

[KyleBolton1]

+1

[pblgomez]

Did you get it to work?

[simonlacey]

unfortunately no. gave up on it.

[grmartin]

I have to admit to being not up to speed with foundation 6. Id be happy to work off hours with someone to see what we can work out.

[grmartin]

This topic will be closed in 5 days if no contact is made.

[simonlacey]

Im super busy this week working at my job and a side project due friday. I can do some testing.

[grmartin]

Ok, i can hold this open for a while longer @simonlacey, the time period isnt hard... i just wanted to ensure we dont keep inactive tickets open. Let me know in the next 30 days if you have some time. Ill be here.

[simonlacey]

@grmartin ok thank you. i hope we figure this one out. it should be part of the f6 zurb template i feel.

[grmartin]

1.0.0 is now in the primary master branch of the original repository. See: http://github.com/micahblu/gulp-connect-php.

[KyleBolton1]

I got this working with using the following in my gulpfile, except using it for foundation for emails. Pretty simple so sure you'd be able to get it working easily.

function server(done) {
  browser.init({
    proxy: 'http://localhost:8000',
    injectChanges: true,
    reloadDelay: 500,
    open: false
  }, function(){
    connect.server({
      base: 'dist',
      open: true
    });
  });
    watch();
    done();
  }

[grmartin]

Thanks @KyleBolton1, @simonlacey when you do get a chance, let me know if this works for you.

[simonlacey]

@KyleBolton1 ty let me try it out.

[grmartin]

@simonlacey any luck?

[simonlacey]

@grmartin not yet ;(

[grmartin]

My offer still stands... when you get a breather.

[KyleBolton1]

Can you post your whole gulpfile?

[simonlacey]

@KyleBolton1 ty i appreciate it. so in our particular situation the dist files are outside of the foundation site folder. we had to modify the config.yml file, and the gulp file to suit with our needs. in the root of our git repo we have two folders. we have a src folder (where we do our work) and also a .com folder (where we push to test and production servers). would this affect your ability to help?

I copy and pasted the gulp file below.

[simonlacey]

'use strict';

import plugins  from 'gulp-load-plugins';
import yargs    from 'yargs';
import browser  from 'browser-sync';
import gulp     from 'gulp';
import panini   from 'panini';
import rimraf   from 'rimraf';
import sherpa   from 'style-sherpa';
import yaml     from 'js-yaml';
import fs       from 'fs';

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
    let ymlFile = fs.readFileSync('config.yml', 'utf8');
    return yaml.load(ymlFile);
}

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
    //gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide));
    gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy)));

// Build the site, run the server, and watch for file changes
gulp.task('default',
    gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
    rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
    return gulp.src(PATHS.assets)
        .pipe(gulp.dest('../website.com/assets'));
        //.pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
    return gulp.src('src/pages/**/*.{php,html,hbs,handlebars}')
        .pipe(panini({
            root: 'src/pages/',
            layouts: 'src/layouts/',
            partials: 'src/partials/',
            data: 'src/data/',
            helpers: 'src/helpers/'
        }))
        .pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
    panini.refresh();
    done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
    sherpa('src/styleguide/index.md', {
        output: PATHS.dist + '/styleguide.html',
        template: 'src/styleguide/template.html'
    }, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
    return gulp.src('src/assets/scss/app.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass({
                includePaths: PATHS.sass
            })
            .on('error', $.sass.logError))
        .pipe($.autoprefixer({
            browsers: COMPATIBILITY
        }))
        /*removed uncss - breaking build*/
        .pipe($.if(PRODUCTION, $.cssnano()))
        .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        .pipe(gulp.dest('../website.com/assets/css'))
        .pipe(browser.reload({ stream: true }));
}

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
    return gulp.src(PATHS.javascript)
        .pipe($.sourcemaps.init())
        .pipe($.babel())
        .pipe($.concat('app.js'))
        .pipe($.if(PRODUCTION, $.uglify()
                .on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        .pipe(gulp.dest('../website.com/assets/js'));
        //.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
    return gulp.src('src/assets/img/**/*')
        .pipe($.if(PRODUCTION, $.imagemin({
            progressive: true
        })))
        .pipe(gulp.dest('../website.com/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
    browser.init({
        server: PATHS.dist, port: PORT
    });
    done();
}

// Reload the browser with BrowserSync
function reload(done) {
    browser.reload();
    done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
    gulp.watch(PATHS.assets, copy);
    gulp.watch('src/pages/**/*.html', gulp.series(pages, reload));
    gulp.watch('src/pages/**/*.php', gulp.series(pages, reload)); /* SIMON LACEY added this for php */
    gulp.watch('src/{layouts,partials}/**/*.html', gulp.series(resetPages, pages, reload));
    gulp.watch('src/{layouts,partials}/**/*.php', gulp.series(resetPages, pages, reload)); /* SIMON LACEY added this for php */
    gulp.watch('src/assets/scss/**/*.scss', sass);
    gulp.watch('src/assets/js/**/*.js', gulp.series(javascript, reload));
    gulp.watch('src/assets/img/**/*', gulp.series(images, reload));
    gulp.watch('src/styleguide/**', gulp.series(styleGuide, reload));
}