search

bradstewart / electron-boilerplate-vue

Boilerplate application for Electron runtime
724 stars 94 forks source link

Changing *.vue or *.js files in app dir doesnt trigger build #8

Closed benkelukas closed 8 years ago

benkelukas commented 8 years ago

Hi, I'm trying to build a simple app based on this boilerplate, but when i change any file in app directory, it doesnt get rebuilt, so to see changes i have to kill the app and build it again manually, which is kind of cumbersome. Is this intended behaviour or am I doing something wrong?

Thanks

mikerockett commented 8 years ago

I've noticed this as well. Interestingly, it started out okay, but then suddenly stopped. Additionally, watch doesn't seem to start up anymore... Just gets stuck at Starting 'watch'....

Update: It appears that it's just taking forever:

[15:41:34] Starting 'watch'...
[15:44:40] Finished 'watch' after 3.08 min

Anyone have an idea why it takes so long? Haven't seen this anywhere before...

Update: Second attempt takes 3.07 minutes, and third attempt takes 3.23 minutes. Seems super strange.

For reference, I'm using:

$ node -v && npm -v
v4.2.6
3.7.1

Perhaps I need to upgrade to Node 5.x? Doubtful, though, as everything else works just fine...

Update: Getting somewhere. This takes a long time because of this line:

gulp.watch(filesToCopy, ['copy'])

This is the filesToCopy const:

const filesToCopy = [
  './app/app.html',
  './app/stylesheets/**/*',
  './app/background.js',
  './app/vendor/**/*',
  './app/node_modules/**/*'
]

As you can see, vendor and node_modules is part of this, so Gulp lands up 'indexing' a lot of files, which takes around 3 minutes on my laptop (which is fast enough, believe me).

SystemZ commented 8 years ago

Can we just skip Gulp and let Webpack do it work? I have working app with Vue without Gulp supporting HMR, now I want to add Electron with this boilerplate.

srhise commented 8 years ago

I am too experiencing this issue. Kind of breaks the developer experience. Is it possible to only copy the files that have changed?

srhise commented 8 years ago

I guess hitting the f5 button to reload isn't that bad of a deal

SystemZ commented 8 years ago

I have auto reload in my project. I'm using this boilerplate but I deleted all gulp stuff. Webpack only. Just need to work out simple one cmd prod builds. Currently I'm just using localhost for webpack-dev-server loaded in background.js. Few tweaks and HMR (hot code replace) will be working.

https://github.com/SystemZ/tagmeister

srhise commented 8 years ago

jealous. I'll dig in. Hopefully they use your approach for the main boilerplate instead of gulp.

SystemZ commented 8 years ago

Thanks. I have hard time to find... time so if you find something useful, I'll be glad to accept any PR. I'm planning to export approach to boilerplate so anyone may find it useful when creating new project :)

FranciscoG commented 8 years ago

My watch task errors out

[15:31:32] Starting 'watch'...
[15:32:13] 'watch' errored after 41 s
[15:32:13] RangeError: Maximum call stack size exceeded
    at Gaze._pollFile (/Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:331:19)
    at /Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:411:12
    at Array.forEach (native)
    at /Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:409:11
    at iterate (/Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:52:5)
    at /Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:61:11
    at /Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:420:5
    at iterate (/Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:52:5)
    at /Users/---/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:61:11
    at /Users/--/projects/electron-boilerplate-vue/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:420:5
rdmclin2 commented 8 years ago

Same problem , my watch task errors out too.

FranciscoG commented 8 years ago

It might have to do with which version of Node I was on (which was an older 0.x.x version). I've updated and no more call stack issue. Still need to refresh the app with cmd-r to see changes but at least it's all compiled

bradstewart commented 8 years ago

Sorry I haven't chimed in yet. I've been buried in work trying to get a product shipped.

So you're all right. The gulp/watch setup is largely unnecessary, and I've moved away from in the aforementioned product which is using npm scripts and webpack (with HMR). I will finally have some time this week to start pulling my configuration from that project into a boilerplate.

I'll let you know when I get started on it. There's a lot of changes, so any feedback you have will be appreciated.

SystemZ commented 8 years ago

@bradstewart Great! Waiting for new commits :)

bradstewart commented 8 years ago

@SystemZ started on https://github.com/bradstewart/electron-boilerplate-vue/pull/11.

mikerockett commented 8 years ago

@bradstewart :+1: Looking good. This is the way the React boilerplate seems to do it.

bradstewart commented 8 years ago

@mikerockett Yea, most of the dev server code came from that project (to which I will properly attribute the code before merging anything).

I also recently ran into https://github.com/Quramy/electron-connect which looks like a good option as well. There's a lot of packages being developed around electron tooling at the moment, and I'd like to take as much custom code out of this as possible.

bradstewart commented 8 years ago

I've been playing around with simply compiling .vue files into .js files rather than bundling the entire application with webpack since Electron supports require already.

Testing should be simpler as you can just require('file-to-test'), and it would help the sharing of code between BrowserWindows and even the main process. But asset compilation now needs to be handled separately, and we're back to a "build process" rather than simply running webpack. Building the electron executables and installers can't easily be handled in webpack though...

Any thoughts on this?

mikerockett commented 8 years ago

@bradstewart To be honest, I'm still pretty new to vue, webpack, and electron. That said, I do like the idea of a single JS app file... Just my 2c.

bradstewart commented 8 years ago

It's still a work in progress in a few spots, but I've updated the project to largely reflect my current setup. Hot reloading works, production builds work, unit and e2e (Selenium) tests work. Electron-builder is going through a bunch of changes right now, so I will add scripts to generate installers once that stabilizes.

I'm closing this issue since the project is almost entirely new, but feel free to open another with any comments, suggestions, or problems.