npm Community Forum (Archive)

The npm community forum has been discontinued.

To discuss usage of npm, visit the GitHub Support Community.

Support on Gulp

Local by Flywheel v3.0.4
Node v10.15.0,
Gulp (CLI v2.0.1, Local v4.0.0)
Windows 10
Git Bash
VSCode 1.30.2

I’ve no idea if I’m in the right place of not but here goes. I’m new to Node.js and have installed Gulp as I progress on my path to learning WP. I seem to have everything up and running but one issue remains. When I start Gulp I get …

$ gulp watch
[18:41:21] Using gulpfile ~\Local Sites\fictional-university\app\public\gulpfile.js
[18:41:21] Starting 'watch'...
[Browsersync] Proxying: http://fictionaluniversity
[Browsersync] Access URLs:
       Local: http://localhost:3000
          UI: http://localhost:3001
 UI External: http://localhost:3001
[18:42:00] Starting '<anonymous>'...
[Browsersync] Reloading Browsers...

But as I edit my code in VSCode only the first edit is synced to the browser automatically and no further edits update. Can anybody help?

Hi, thanks for coming here and welcome to the community.

From an opinionated point of view Gulp is kinda dead, so getting support on that issue might be a bit difficult. I suggest using native npm scripts instead of Gulp as a task manager, which will allow you to leverage the vast number of npm modules directly instead of being limited to the modules customized for Gulp.

With that being said, this is the best SO post I found which may contain solutions to your problem.

There is also Browsersync and Gulp documentation which may help you understand how the two tools work together.

I hope some of that helps.

Thank you Brian.

On the course I’m doing they only gave the Gulp option but I hadn’t realised it was dying out. Could you please let me know what I can use instead. For the time being I’d be immediately looking at something which refreshes the web page automatically when code is changed. Right now I’m not sure how many other features I’d need to implement to replace Gulp. As I say all this is new to me.

Well, that’s a pretty broad topic. npm scripts are commands that are embedded into the "scripts" section of the package.json file. See here for some examples.

For “watching” changes and refreshing your browser, you need something like Webpack or Rollup. Other package combinations work and may actually be lighter in theory, but are more complicated to setup.

Thank you, that’s well beyond my pay grade atm. I don’t want to spend anymore time on this so will come back to it later when I’m more comfortable and have grasped WP better.
Thanks for your help :)