Menu icon Foundation
Stop working after first change

I am using foundation 6.2.

 

After first change it stop working.

Terminal:

➜  floder  foundation watch

> [email protected] start /Users/me/Workspace/Sites/folder
> gulp

[15:25:45] Requiring external module babel-register
[15:25:51] Using gulpfile ~/Workspace/Sites/folder/gulpfile.babel.js
[15:25:51] Starting 'default'...
[15:25:51] Starting 'build'...
[15:25:51] Starting 'clean'...
[15:25:51] Finished 'clean' after 8.66 ms
[15:25:51] Starting 'pages'...
[15:25:51] Starting 'sass'...
[15:25:51] Starting 'javascript'...
[15:25:51] Starting 'images'...
[15:25:51] Starting 'copy'...
[15:25:57] Finished 'images' after 5.28 s
[15:25:59] Finished 'sass' after 8.21 s
[15:25:59] Finished 'copy' after 8.21 s
[15:25:59] Finished 'pages' after 8.22 s
[15:26:02] Finished 'javascript' after 10 s
[15:26:02] Starting 'styleGuide'...
[15:26:02] Finished 'styleGuide' after 43 ms
[15:26:02] Finished 'build' after 10 s
[15:26:02] Starting 'server'...
[15:26:02] Finished 'server' after 129 ms
[15:26:02] Starting 'watch'...
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:8000
    External: http://192.168.0.37:8000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.37:3001
 -------------------------------------
[BS] Serving files from: dist
[15:26:28] Starting 'pages'...
[15:26:28] Finished 'pages' after 14 ms
[15:26:28] Starting '<anonymous>'...
[BS] Reloading Browsers...

 

I dont make any changes on gul file, so:

'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));

// 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(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
  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(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
    }))
    .pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cssnano()))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/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(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(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: PATHS.dist, port: PORT
  });
  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, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss', sass);
  gulp.watch('src/assets/js/**/*.js', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*', gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**', gulp.series(styleGuide, browser.reload));
}

gulp watch

I am using foundation 6.2.

 

After first change it stop working.

Terminal:

➜  floder  foundation watch

> [email protected] start /Users/me/Workspace/Sites/folder
> gulp

[15:25:45] Requiring external module babel-register
[15:25:51] Using gulpfile ~/Workspace/Sites/folder/gulpfile.babel.js
[15:25:51] Starting 'default'...
[15:25:51] Starting 'build'...
[15:25:51] Starting 'clean'...
[15:25:51] Finished 'clean' after 8.66 ms
[15:25:51] Starting 'pages'...
[15:25:51] Starting 'sass'...
[15:25:51] Starting 'javascript'...
[15:25:51] Starting 'images'...
[15:25:51] Starting 'copy'...
[15:25:57] Finished 'images' after 5.28 s
[15:25:59] Finished 'sass' after 8.21 s
[15:25:59] Finished 'copy' after 8.21 s
[15:25:59] Finished 'pages' after 8.22 s
[15:26:02] Finished 'javascript' after 10 s
[15:26:02] Starting 'styleGuide'...
[15:26:02] Finished 'styleGuide' after 43 ms
[15:26:02] Finished 'build' after 10 s
[15:26:02] Starting 'server'...
[15:26:02] Finished 'server' after 129 ms
[15:26:02] Starting 'watch'...
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:8000
    External: http://192.168.0.37:8000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.37:3001
 -------------------------------------
[BS] Serving files from: dist
[15:26:28] Starting 'pages'...
[15:26:28] Finished 'pages' after 14 ms
[15:26:28] Starting '<anonymous>'...
[BS] Reloading Browsers...

 

I dont make any changes on gul file, so:

'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));

// 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(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
  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(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
    }))
    .pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
    .pipe($.if(PRODUCTION, $.cssnano()))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/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(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(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init({
    server: PATHS.dist, port: PORT
  });
  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, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss', sass);
  gulp.watch('src/assets/js/**/*.js', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*', gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**', gulp.series(styleGuide, browser.reload));
}
Jana Obzerova over 3 years ago

After first change foundation stops working. It serve only first change, and ends with "Reloading Browsers..."

G Rosewarne over 3 years ago

I have the same problem! :(

Ondřej Vašíček over 3 years ago

Yep, the same problem here - the new Foundation projects behave like this. The old ones are ok. There must be some change in dependencies. It’s quite tricky, that it stops working without any reason. Is there any chance how Foundation could prevent it?

G Rosewarne over 3 years ago

https://github.com/gulpjs/gulp/commit/6c03475e1a39d18c139b4d56baa1c14a587f9f4a?diff=unified

if you use the previous version of Gulp it  works normaly.

Bob Zhu over 3 years ago

Same here.

Alok Kumar over 3 years ago

Same problem here. Only first change in the src folder is watched after that it stops. 


Tommy Tompson over 3 years ago

To resolve this problem try to replace 

function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/pages/**/*.html', gulp.series(pages, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss', sass);
  gulp.watch('src/assets/js/**/*.js', gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*', gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**', gulp.series(styleGuide, browser.reload));
}

with this code 

function watch() {
  gulp.watch(PATHS.assets, copy);
  gulp.watch('src/pages/**/*.html').on('change',gulp.series(pages, browser.reload));
  gulp.watch('src/{layouts,partials}/**/*.html').on('change', gulp.series(resetPages, pages, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss', sass);
  gulp.watch('src/assets/js/**/*.js').on('change',gulp.series(javascript, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change',gulp.series(images, browser.reload));
  gulp.watch('src/styleguide/**').on('change',gulp.series(styleGuide, browser.reload));
}

Jana Obzerova over 3 years ago

Thanks Tommy Tompson, it works for me...

Alok Kumar over 3 years ago

For temporary solution I had switched to different branch of gulp #new-docs instead of #4.0 in package.json which solves the problem. 

@Tommy 
My gulpfile.babel.js has only these five lines in watch method

function watch() {

  gulp.watch('src/pages/**/*.html', gulp.series(pages, inline, browser.reload));

  gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, inline, browser.reload));

  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, pages, inline, browser.reload));

  gulp.watch('src/assets/img/**/*', gulp.series(images, browser.reload));

 }


Mine is newly downloaded copy just today so I think some lines has been removed in new watch method. Will putting .on('change', ....) work for me too ?

Alok Kumar over 3 years ago

Ok this works for me 

function watch() {
  gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, inline, browser.reload));
  gulp.watch('src/layouts/**/*').on('change', gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch('src/partials/**/*').on('change', gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch('../scss/**/*.scss').on('change', gulp.series(sass, pages, inline, browser.reload));
  gulp.watch('src/assets/scss/**/*.scss').on('change', gulp.series(sass, pages, inline, browser.reload));
  gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
}

Tommy Tompson over 3 years ago

Yesterday in gulp watch method was changed, but in foundation-zurb-template this changes wasn't considered for this moment, as I understand.

Alok Kumar over 3 years ago

Yes and for that same reason another way to solve this issue is to use previous version of gulp. Which I mentioned in my second comment.

In package.json the gulp dependency's version can be altered and then npm install can be run.

I replaced #4.0 with#new-docs  These both are different branches on github apart from master. Using #master will give more errors as it has 3.9.1 version which is very old and other dependency will have issues so #new-docs is the one which works perfectly fine.

Snig over 3 years ago

Thanks Tommy - when this first started happening (seemingly out of the blue) I thought I was going mad...

Your change resolved the issue for me as well - much appreciated.

Tommy Tompson over 3 years ago

I've found some issue in my code:

Need to replace 

gulp.watch('src/assets/scss/**/*.scss', sass);

with

gulp.watch('src/assets/scss/**/*.scss').on('change', gulp.series(sass, browser.reload));

for reload browser when scss files was changed

Snig over 3 years ago

Thanks for pointing this out as well.