Why is "foundation watch" not working for me?

[PaschalCollins]

I got some errors after I run foundation watch.

$ foundation watch

foundation-zurb-template@1.0.0 start C:\Users\Paschal Collins\learning_pro\todo-app-list gulp

[13:14:37] Requiring external module @babel/register Browserslist: caniuse-lite is outdated. Please run next command yarn upgrade [13:14:43] Using gulpfile ~\learning_pro\todo-app-list\gulpfile.babel.js [13:14:43] Starting 'default'... [13:14:43] Starting 'build'... [13:14:43] Starting 'clean'... [13:14:43] Finished 'clean' after 9.33 ms [13:14:43] Starting 'pages'... [13:14:43] Starting 'javascript'... [13:14:43] Starting 'images'... [13:14:43] Starting 'copy'... [13:14:43] 'images' errored after 448 ms [13:14:43] TypeError: $.imagemin.mozjpeg is not a function at images (C:\Users\Paschal Collins\learning_pro\todo-app-list/gulpfile.babel.js:144:18) at bound (domain.js:301:14) at runBound (domain.js:314:12) at asyncRunner (C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\async-done\index.js:55:18) at _combinedTickCallback (internal/process/next_tick.js:132:7) at process._tickDomainCallback (internal/process/next_tick.js:219:9) [13:14:43] 'build' errored after 524 ms [13:14:43] 'default' errored after 531 ms [13:14:43] The following tasks did not complete: pages, javascript, copy [13:14:43] Did you forget to signal async completion? Error: foundation-zurb-template@1.0.0 start: gulp Exit status 1 at EventEmitter. (C:\Users\Paschal Collins\AppData\Roaming\npm\node_modules\foundation-cli\node_modules\npm\lib\utils\lifecycle.js:217:16)
at emitTwo (events.js:126:13) at EventEmitter.emit (events.js:214:7) at ChildProcess. (C:\Users\Paschal Collins\AppData\Roaming\npm\node_modules\foundation-cli\node_modules\npm\lib\utils\spawn.js:24:14) at emitTwo (events.js:126:13) at ChildProcess.emit (events.js:214:7) at maybeClose (internal/child_process.js:915:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

[DanielRuf]

You probably have outdated dependencies. Try rm -rf node_modules && npm i

See https://github.com/foundation/foundation-zurb-template/pull/110 which introduced this change.

[PaschalCollins]

@DanielRuf I did as you said but the error is still there.

Paschal Collins@DESKTOP-H75Q2AJ MINGW64 ~/learning_pro/todo-app-list $ rm -rf node_modules

Paschal Collins@DESKTOP-H75Q2AJ MINGW64 ~/learning_pro/todo-app-list $ npm i

node-sass@4.13.0 install C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\node-sass node scripts/install.js

Cached binary found at C:\Users\Paschal Collins\AppData\Roaming\npm-cache\node-sass\4.13.0\win32-x64-57_binding.node

core-js@2.6.10 postinstall C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\core-js node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:

https://opencollective.com/core-js https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

node-sass@4.13.0 postinstall C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\node-sass node scripts/build.js

Binary found at C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\node-sass\vendor\win32-x64-57\binding.node Testing binary Binary is fine

gifsicle@3.0.4 postinstall C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\gifsicle node lib/install.js

√ gifsicle pre-build test passed successfully

jpegtran-bin@3.2.0 postinstall C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\jpegtran-bin node lib/install.js

√ jpegtran pre-build test passed successfully

optipng-bin@3.1.4 postinstall C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\optipng-bin node lib/install.js

√ optipng pre-build test passed successfully npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1362 packages from 909 contributors and audited 1431 packages in 485.592s found 1156 vulnerabilities (1113 low, 24 moderate, 19 high) run npm audit fix to fix them, or npm audit for details

Paschal Collins@DESKTOP-H75Q2AJ MINGW64 ~/learning_pro/todo-app-list $ npm start

foundation-zurb-template@1.0.0 start C:\Users\Paschal Collins\learning_pro\todo-app-list gulp

[05:23:40] Requiring external module @babel/register Browserslist: caniuse-lite is outdated. Please run next command yarn upgrade [05:23:48] Using gulpfile ~\learning_pro\todo-app-list\gulpfile.babel.js [05:23:48] Starting 'default'... [05:23:48] Starting 'build'... [05:23:48] Starting 'clean'... [05:23:48] Finished 'clean' after 4.88 ms [05:23:48] Starting 'pages'... [05:23:48] Starting 'javascript'... [05:23:48] Starting 'images'... [05:23:48] Starting 'copy'... [05:23:48] 'images' errored after 361 ms [05:23:48] TypeError: $.imagemin.mozjpeg is not a function at images (C:\Users\Paschal Collins\learning_pro\todo-app-list/gulpfile.babel.js:144:18) at bound (domain.js:301:14) at runBound (domain.js:314:12) at asyncRunner (C:\Users\Paschal Collins\learning_pro\todo-app-list\node_modules\async-done\index.js:55:18) at _combinedTickCallback (internal/process/next_tick.js:132:7) at process._tickDomainCallback (internal/process/next_tick.js:219:9) [05:23:48] 'build' errored after 416 ms [05:23:48] 'default' errored after 432 ms [05:23:48] The following tasks did not complete: pages, javascript, copy [05:23:48] Did you forget to signal async completion? npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! foundation-zurb-template@1.0.0 start: gulp npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the foundation-zurb-template@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Paschal Collins\AppData\Roaming\npm-cache_logs\2020-07-26T04_23_48_611Z-debug.log

[PaschalCollins]

This fixed the issue for me @DanielRuf .... but i dont know if there will be any effect.

from gulpfile.babel.js (line 141) i changed(updated) the image function like this below.

// Copy images to the "dist" folder // In production, the images are compressed

function images() {
  return gulp.src('src/assets/img/**/*')
    .pipe($.if(PRODUCTION, $.imagemin([
      // $.imagemin.mozjpeg({ progressive: true }),
      // $.gifsicle({interlaced: true}),
      $.imagemin.jpegtran({progressive: true}),
      $.imagemin.optipng({optimizationLevel: 5}),
      $.imagemin.svgo({plugins: [{removeViewBox: false}]})
    ])))
    .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

[DanielRuf]

I've reverted the changes so we use jpgtran again. Sorry for the inconveniences. There should not be any problem with jepgtran as we used this the whole time.

Closing as this should be resolved for new projects.