JS doesn't reload

[No3x]

When I run gulp and make a change to the assets/js/app/app.js or assets/js/app/components/welcome.vue browserSync doesn't recognise a change. Whenever I change JS I have to rerun gulp. sass changes work fine.

Gulp handles the CSS and running Webpack, while Webpack handles JS

I think you described in the README that changes on js and scss should work. Can you reproduce this?

I recently devloped with the vuetifyjs/webpack template and now try to port this to your structure. They compile .styl files with webpack - maybe one can handover this burden for scss too so there is no gulp required. I know webpack and browserSync for 2 days.. I don't know how to fix this but I would like to use Vue in my WordPress plugin.

[itzikbenh]

It should work assuming you didn't change the file structure. Are you getting back any errors? In general once you run gulp it should watch and wait for changes. For me it works just fine. If you just download the repo, run npm install and then gulp, does it work for you?

[No3x]

Sure everything is installed and running: Here is the log of browserSync when running gulp. Then doing a change on sass and the js.

[gulp-patterns] Proxying: http://src.wordpress-develop.dev
[gulp-patterns] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.50.4:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.50.4:3001
 -------------------------------------
[gulp-patterns] Watching files...
[17:38:16] Version: webpack 3.8.1
    Asset     Size  Chunks                    Chunk Names
   app.js  6.92 kB       0  [emitted]         app
vendor.js   302 kB       1  [emitted]  [big]  vendor
[17:38:16] webpack is watching for changes
[gulp-patterns] Reloading Browsers...
[gulp-patterns] Browser Connected: Chrome, version: 61.0.3163.100
[18:07:34] Starting 'sass'...
[18:07:34] Finished 'sass' after 13 ms
[gulp-patterns] 1 file changed (app.css)

Expected: watched sass & js change Actual: sass change but no js change The files are 1:1 except modifications in the gulp-file:

host: '192.168.50.4',
proxy: 'src.wordpress-develop.dev',

[itzikbenh]

That's very weird. I'm running it now and it works just fine. I have the exact copy of the repo. I can't think of anything aside of structure that was changed.

[No3x]

That's really weird. Does it overwrite your public/js/app.js when you change the assets/js/app/app.js? Any idea how to track this down? I will test on another system and report back.

[No3x]

Works fine on another system:

Watching files...
[19:06:11] Version: webpack 3.8.1
    Asset     Size  Chunks                    Chunk Names
   app.js  6.92 kB       0  [emitted]         app
vendor.js   302 kB       1  [emitted]  [big]  vendor
[19:06:11] webpack is watching for changes
[gulp-patterns] Reloading Browsers...
[19:06:11] webpack is watching for changes
[gulp-patterns] Reloading Browsers...
[19:06:18] Starting 'sass'...
[19:06:18] Finished 'sass' after 2.64 ms
[gulp-patterns] 1 file changed (app.css)
[19:06:29] Version: webpack 3.8.1
 Asset     Size  Chunks             Chunk Names
app.js  6.92 kB       0  [emitted]  app
 + 1 hidden asset
[19:06:29] webpack is watching for changes
[gulp-patterns] Reloading Browsers...

The reason might be VVV and Virtualbox FileSync or something like that... Gosh But I can't see the difference between sass and js. They both are watched with gulp filewatchers. Sorry for the inconvenience.

[No3x]

Adding to the webpack.config.js

watchOptions: {
    poll: 1000
},

as workaround resolves this for Virtualbox. This is described in the webpack docs

[itzikbenh]

Yeah, I stick to Laravel valet. Well, it only compiles, it doesn't do it in the nicest possible way. The reason they are both watched with gulp is because I need to know when to tell browserSync to reload.

Before I used to do all through Webpack, but I wasn't happy with the performance. I might try it again soon. You can also try to use Laravel-mix that uses only Webpack and is configured to work with Vue as it comes installed in new Laravel projects.

[No3x]

Thanks for the hints. I don't like to install much software on the same system.

The reason they are both watched with gulp is because I need to know when to tell browserSync to reload.

Ah, this explains why nothing happened before the workaround.

I might need to fiddle this styl compilation into webpack to get vuetify working. I really like developing software more than doing gulp/webpack fiddle.

[No3x]

Oh it's not really performant and stable (polling considered) compared to the mentioned template. Sometimes I change a Vue data attribute and it's not synced.

[itzikbenh]

I just made this version that seems to work. I might actually switch to it. It uses webpack only with webpack-dev-server, HMR and browserSync. https://github.com/itzikbenh/WordVuePack