Menu icon Foundation
Foundation 6: Watch Hangs

I'm loving Foundation 6.
My main problem so far has to do with the scss and panini compiler and browser watch. In both the CLI and Yetilaunch it hangs and I have to either ctrl+c and restart foundation (in the CLI) or toggle the "stop" and "start" buttons on Yetilaunch. In will work for one or two saves and then just hang. I'm still just piddling, not doing anything complicated, but it's already pretty frustrating.

foundation 6paniniscss

I'm loving Foundation 6.
My main problem so far has to do with the scss and panini compiler and browser watch. In both the CLI and Yetilaunch it hangs and I have to either ctrl+c and restart foundation (in the CLI) or toggle the "stop" and "start" buttons on Yetilaunch. In will work for one or two saves and then just hang. I'm still just piddling, not doing anything complicated, but it's already pretty frustrating.

Rafi Benkual about 4 years ago

We built the Foundation website with it as well. When you edit Framework files, layouts, or partials you may need to restart Gulp to see the changes. Otherwise, editing pages should be as normal.

Tim Gummer almost 4 years ago

I'm definitely stuck with this
I normally use codekit with drupal CMS frontend building
but i have some static prototyping to do - trying to use panini with Foundation (rather than rely on 6 YO dreamweaver templating!)

Yeti/browsersync mostly doesn't refresh. And Yeti doesn't provide scss > css sourcemapping.

So I'm trying to let yeti handle panini and codekit do the scss compiling (with sourcemaps)
except i can't turn yeti scss compiling off, so trying to let codekit 'recompile' after yeti with a delayed refresh

arghgh but now the normally reliable codekit won't refresh, browsersync flashes up a modal that it is refhreshing but it's not.

any thoughts on what I can do to get control over this situation?
is there something else (besides yeti I have to set up ) to make browsersync work?

i'd go CLI but I have a sense node is not completely happy here.

But I'm not sure what is supposed to be doing the refreshing. Currently running Yeti, saw livereload was installed with the template install so turned that extension back on, can see browser

Travis Fulton almost 4 years ago

Tim and Ryan, are you experiencing the same issue as me? Seems like there should be a note explaining that you may have to restart gulp to see changes in framework files.
http://foundation.zurb.com/forum/posts/37589-cli-installed-f611-doesnt-update-panini-changes-in-dist

Adolfo Barreto almost 4 years ago

I was having the same Issue. It was resolved to today on github by gakimball here: https://github.com/zurb/panini/issues/10#issuecomment-172692241 ...I replaced the contents of my gulp.js file with the following code and all is working again.

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',
    // Paths to individual JS components defined below
    'bower_components/foundation-sites/js/foundation.abide.js',
    'bower_components/foundation-sites/js/foundation.accordion.js',
    'bower_components/foundation-sites/js/foundation.accordionMenu.js',
    'bower_components/foundation-sites/js/foundation.drilldown.js',
    'bower_components/foundation-sites/js/foundation.dropdown.js',
    'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
    'bower_components/foundation-sites/js/foundation.equalizer.js',
    'bower_components/foundation-sites/js/foundation.interchange.js',
    'bower_components/foundation-sites/js/foundation.magellan.js',
    'bower_components/foundation-sites/js/foundation.offcanvas.js',
    'bower_components/foundation-sites/js/foundation.orbit.js',
    'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
    'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
    'bower_components/foundation-sites/js/foundation.reveal.js',
    'bower_components/foundation-sites/js/foundation.slider.js',
    'bower_components/foundation-sites/js/foundation.sticky.js',
    'bower_components/foundation-sites/js/foundation.tabs.js',
    'bower_components/foundation-sites/js/foundation.toggler.js',
    'bower_components/foundation-sites/js/foundation.tooltip.js',
    'src/assets/js/**/!(app).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() {
  return gulp.src(PATHS.assets)
    .pipe(gulp.dest('dist/assets'));
});

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

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

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

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html'],
    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'))
    .pipe(browser.reload({ stream: true }));
});

// 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'))
    .on('finish', browser.reload);
});

// 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'))
    .on('finish', browser.reload);
});

// 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
  });
});

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

-Adolfo

Tim Gummer almost 4 years ago

the gulp js fix seems to have more or less gotten me up and running with this - thanks Zurbians!

I will confess to finding Panini and yeti somewhat opaque - i know yeti is there to keep things simple but I'm not sure what can be done in it's CLI or not in terms of variations.

it would be really really great if there was a basic video tutorial walking through panini with yeti (and/or with naked CLI). I'd offer to do that myself but.. er - there's the little detail that I don't know what I'm doing. :(

Otherwise the main thing missing in the workflow for me is sass source mapping. So for this I'm still running codekit over the top. I'm not quite sure what is actually compiling the css but hey - seems to be kind of working.

I gather from the inimitable bryan at codekit that panini is going to find its way into his app - so that augurs well for the future

After a long break from foundation (since 3) I'm very impressed with where its gotten to as a framework for more than just prototyping. My quibbles (with grid, colour variables etc) are relatively minor.

Thanks again all
(fingers x'ed)

Ryan Hayden almost 4 years ago

I've switched to using the CLI and it's working without a hitch. This is one awesome framework.

Testy Tester almost 4 years ago

My Foundation watch doens't work AT ALL. I can only get it to compile when I edit the app.scss file (once I can find it again).

 

how do I get it to work like Foudnation 5, which used Compass, and compiled when I edited ANY file. It's not really helpful to have it just watch one file...

 

*Edited*

Yes I'm in the correct folder :)