Menu icon Foundation
glup not copying image assets

I'm using the Foundation 6 Zurb Master template out of the box (absolutely vanilla), on Windows. Everything else is working as expected, but my gulp watch on the images folder is not copying anything to dist from src.

If I run a build, it minifies and copies over, if I stop and restart it copies everything over.

So in a normal workflow, you add an image to src/assets/img, pop it in your HTML and nothing is in dist, so the browsersync refresh shows me a broken image link.

I have tried this on 2 separate Windows 7 environments so far, with node.js, Git and Bower.

The relevant watch line is...

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

The relevant glup function is....

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

Any help greatly appreciated as I am keen to introduce Foundation 6 into our mainstream development workflow, but this is a bit of a showstopper.

Smart comments about doing it on a MAC will be treated with the contempt they deserve.

gulpimagesZurb Master templatefoundation 6

I'm using the Foundation 6 Zurb Master template out of the box (absolutely vanilla), on Windows. Everything else is working as expected, but my gulp watch on the images folder is not copying anything to dist from src.

If I run a build, it minifies and copies over, if I stop and restart it copies everything over.

So in a normal workflow, you add an image to src/assets/img, pop it in your HTML and nothing is in dist, so the browsersync refresh shows me a broken image link.

I have tried this on 2 separate Windows 7 environments so far, with node.js, Git and Bower.

The relevant watch line is...

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

The relevant glup function is....

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

Any help greatly appreciated as I am keen to introduce Foundation 6 into our mainstream development workflow, but this is a bit of a showstopper.

Smart comments about doing it on a MAC will be treated with the contempt they deserve.

Glenn Philp over 3 years ago

Jon, I am running Foundation for Sites Zurb Master template as well on my MacBook Pro 10.11.2 using the "foundation watch" command.

Anything I put into assets isn't copying over as well. I don't know if they are blocking all files with the variables:
Javascript
var PATHS = {
assets: [
'src/assets/**/*',
'!src/assets/{!img,js,scss}/**/*'
],
...
}

As to my knowledge this reads; allow any file within src > assets and its children to be seen by the build process. However, then it says if not a file within src > assets > [img or js or scss] and its children. So basically it is almost like the var PATHS is overriding the original statement.

I too would love to know the solution to this issue.

Rafi Benkual over 3 years ago

I am adding images in src -> assets -> img and they are being copied over to dist.

How did you create the project? Was it through the CLI? Yeti Launch? Or other?

Glenn Philp over 3 years ago

I used the CLI example starter project from terminal:
foundation new --framework sites --template zurb

Then after following the prompts, I did as it recommended running foundation watch.

Jon Hurley over 3 years ago

I'm not using CLI, I followed the instructions for the Zurb template from here...

http://foundation.zurb.com/sites/docs/starter-projects.html

Download and unzip the master template files into a project directory.

npm install
bower install
npm start

I have a colleague with an install that is working.

I can hack mine to work (by removing the img reference in line 23 of the standard gulpfile) but fundamentally it is not recognising the creation or changes to any files in the img foider, and the images watch function does not run.

Josef Kortan about 3 years ago

Having the same issue on Win 10. Is there any solution to this?

 

Thank you, 

Josef