Gulp + Browsersync + Netlify Dev?

Support
,
1

I’ve got a project which relies heavily on gulp. A typical dev session would require only one command:

  • gulp dev

I’m ready to integrate Netlify Dev (/tree/netlify-dev), but trying to avoid introducing another command needed for a typical dev session:

  • ntl dev
  • gulp dev

That’s not that bad. I could deal with that. However…

Netlify Dev claims that it can do hot reloading, but it requires you to stream it to a live URL. I don’t need to do that with browsersync. I’m also not sure that they both reload in the same manner.

Additionally, I don’t think Netlify Dev can sync between multiple browsers/devices at the same time like browsersync does. This capability is extremely useful and I’d hate to see it go.

Do I need to ditch browsersync and just use gulp to watch for file changes, in two separate tabs? It’s bearable, but seems silly.

I’m open to all ideas, but I’m trying to avoid using any static site generators (for now). Thanks for reading.

3

UPDATE: READ BELOW FOR ACTUAL ANSWER

netlfy dev doesnt require static site generators, and you dont need to ditch browsersync. you can tell netlify dev to run that command for you. inside netlify.toml, add

[dev]
   command="gulp dev"
   port=1234 # whatever port gulp/browsersync listens on

I dont have a ton of personal experience with browsersync so idk how the multiple browser thing would work with netlify dev, but theres a good chance it’ll work with this config.

this config is documented in the netlify dev docs but dont have a place in the netlify.toml official docs yet

1 Like
4

I didn’t think I’d have to use a SSG or ditch browsersync, but thanks for confirming. :slight_smile:
I also saw this in the Netlify dev docs but I forgot to mention it. Whoops.

When I do as you have suggested, it works… for a second or two. Then I get this in the console:

[19:28:01] Finished 'dev' after 12 ms
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
.
Connected!
Waiting for localhost:34567.
Connected!
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at module.exports (~/.npm-global/lib/node_modules/netlify-cli/node_modules/@netlify/rules-proxy/index.js:94:29)
    at startProxy (~/.npm-global/lib/node_modules/netlify-cli/src/commands/dev/index.js:108:20)

And here’s my .toml:

[build]
  command = "npm run init; gulp all"
  functions = "lambda"
  publish = "build"

[context.production]
  command = "npm run init; gulp all -p"

[dev]
  command = "gulp dev"
  port = 3000

5

I had to add this to my toml too:

  publish = "build"

So for others who may run into this, my toml looks like this now:

[build]
  command = "npm run init; gulp all"
  functions = "lambda"
  publish = "build"

[context.production]
  command = "npm run init; gulp all -p"

[dev]
  command = "gulp dev"
  port = 3000
  publish = "build"

@swyx thanks so much for your help.

1 Like
6

thanks for sharing this, @erikwoods! this will definitely help other people!

1 Like
7

Oh and I marked your reply as the solution @swyx but you should consider updating your reply so people don’t have to keep reading.

8

Can I make it work without gulp? Just N. dev and browsersync? There is a video in the thread I do not understand.

9

@tik9 absolutely, don’t need to use gulp

look into 11ty (eleventy) if you want a super simple but flexible SSG.

Ignore the video. :slight_smile:

1 Like