Menu icon Foundation
Foundation 6 browserSync proxy

Hi guys
I have local dev webserver at http://mydomain.loc served by apache/php,
so i want to aim live reload webserver to this url as source.
I changed /gulpfile.js to watch php files, not only html, so for now i have generated index.php in 'dist ' directory.
When i go to http://mydomain.loc - it works fine.

Next i tried to add a proxy to gulp-webserver config, as described in gulp-webserver doc
(https://www.npmjs.com/package/gulp-webserver)

// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
  return gulp.src('./dist')
    .pipe($.webserver({
      host: 'localhost',
      port: 8000,
      livereload: true,
      open: true,
      proxies: [
      {
        source:'http://mydomain.loc',//also tried mydomain.loc here without http://
        target: 'http://localhost:8000'
      }]
    }));
});
            

         

after this site at http://localhost:8000 stopped work with words 'Cannot GET /'

also foundation doc says cli should use browserSync, not gulp-webserver.
I found another gulpfile.js in bower_components/foundation-sites.
i tried to change it like this

// Starts a BrowerSync instance
gulp.task('serve', ['build'], function(){
  browser.init({server: './_build',proxy: "mydomain.loc"});
});
            

         

(http://www.browsersync.io/docs/gulp/)

but i am not sure about this gulpfile, is it watched by cli...

..so anyone? what can do here?

foundation 6live reloadproxy

Hi guys
I have local dev webserver at http://mydomain.loc served by apache/php,
so i want to aim live reload webserver to this url as source.
I changed /gulpfile.js to watch php files, not only html, so for now i have generated index.php in 'dist ' directory.
When i go to http://mydomain.loc - it works fine.

Next i tried to add a proxy to gulp-webserver config, as described in gulp-webserver doc
(https://www.npmjs.com/package/gulp-webserver)

// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
  return gulp.src('./dist')
    .pipe($.webserver({
      host: 'localhost',
      port: 8000,
      livereload: true,
      open: true,
      proxies: [
      {
        source:'http://mydomain.loc',//also tried mydomain.loc here without http://
        target: 'http://localhost:8000'
      }]
    }));
});
            

         

after this site at http://localhost:8000 stopped work with words 'Cannot GET /'

also foundation doc says cli should use browserSync, not gulp-webserver.
I found another gulpfile.js in bower_components/foundation-sites.
i tried to change it like this

// Starts a BrowerSync instance
gulp.task('serve', ['build'], function(){
  browser.init({server: './_build',proxy: "mydomain.loc"});
});
            

         

(http://www.browsersync.io/docs/gulp/)

but i am not sure about this gulpfile, is it watched by cli...

..so anyone? what can do here?

Yuri Gor about 2 years ago

Final F6 release with Browsersync now works correctly.
Here is my F6+Apache/php gulpfile:

 var $        = require('gulp-load-plugins')();
var argv     = require('yargs').argv;
var browser  = require('browser-sync');
var gulp     = require('gulp');
var panini   = require('panini');
var rimraf   = require('rimraf');
var sequence = require('run-sequence');
var sherpa   = require('style-sherpa');

// Check for --production flag
var isProduction = !!(argv.production);

// Port to use for the development server.
var PORT = 8000;

// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9'];

// File paths to various assets are defined here.
var PATHS = {
  assets: [
    'src/assets/**/*',
    '!src/assets/{!img,js,scss}/**/*'
  ],
  sass: [
    'bower_components/foundation-sites/scss',
    'bower_components/motion-ui/src/'
  ],
  javascript: [
    'bower_components/jquery/dist/jquery.js',
    'bower_components/what-input/what-input.js',
    'bower_components/foundation-sites/js/foundation.core.js',
    'bower_components/foundation-sites/js/foundation.util.*.js',
    'bower_components/foundation-sites/js/foundation.*.js',
    'src/assets/js/**/*.js',
    'src/assets/js/app.js'
  ]
};

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

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

// Copy page templates into finished HTML files
gulp.task('pages', function() {
  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('dist'));
});

gulp.task('pages:reset', function(cb) {
  panini.refresh();
  gulp.run('pages');
  cb();
});

gulp.task('styleguide', function(cb) {
  sherpa('src/styleguide/index.md', {
    output: 'dist/styleguide.html',
    template: 'src/styleguide/template.html'
  }, cb);
});

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html','src/**/*.php'],
    ignore: [
      new RegExp('^meta\..*'),
      new RegExp('^\.is-.*')
    ]
  }));

  var minifycss = $.if(isProduction, $.minifyCss());

  return gulp.src('src/assets/scss/app.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    .pipe(uncss)
    .pipe(minifycss)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/css'));
});

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.concat('app.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('dist/assets/js'));
});

// Copy images to the "dist" folder
// In production, the images are compressed
gulp.task('images', function() {
  var imagemin = $.if(isProduction, $.imagemin({
    progressive: true
  }));

  return gulp.src('src/assets/img/**/*')
    .pipe(imagemin)
    .pipe(gulp.dest('dist/assets/img'));
});

// Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});

// Start a server with LiveReload to preview the site in
gulp.task('server', ['build'], function() {
  browser.init({
    //server: 'dist',
    port: PORT,
    ui: {
      port: 8080
    },
    proxy: "local.dev"
  });
});

// Build the site, run the server, and watch for file changes
gulp.task('default', ['build', 'server'], function() {
  gulp.watch(PATHS.assets, ['copy', browser.reload]);
  gulp.watch(['src/pages/**/*.{html,php}',], ['pages', browser.reload]);
  gulp.watch(['src/{layouts,partials}/**/*.{html,php}'], ['pages:reset', browser.reload]);
  gulp.watch(['src/assets/scss/**/*.scss'], ['sass', browser.reload]);
  gulp.watch(['src/assets/js/**/*.js'], ['javascript', browser.reload]);
  gulp.watch(['src/assets/img/**/*'], ['images', browser.reload]);
  gulp.watch(['src/styleguide/**'], ['styleguide', browser.reload]);
});

about proxy read here:
http://www.browsersync.io/docs/options/#option-proxy

Jordan Hetmat over 1 year ago

Hello. I'm not sure about this, but maybe you can use another proxy settings? Which settings or service did you use? Check advanced.name, maybe it could be useful for you.