generator-ionic
generator-ionic copied to clipboard
grunt serve takes too long to build app
First of all: GREAT JOB, guys. generator-ionic is a such a great generator!!
I've successfully installed yo ionic. I did grunt serve
and made some changes in html files in app/
folder. The grunt tasks start working and builds the app. But here comes the issue:
Buliding takes sooo long (more than 60s).
Surprisingly, if I do changes in www/
folder directly the livereload task does its job in about 10s. Is that expected behaviour? Or what am I doing wrong?
Here is the console output:
Loading: /?restart=501162
>> File "app/templates/tab-dash.html" changed.
Running "newer:copy:app" (newer) task
Running "copy:app" (copy) task
Copied 1 file
Running "newer-postrun:copy:app:1:/vagrant/poppe-kappus-ionic/node_modules/grunt-newer/.cache" (newer-postrun) task
Done, without errors.
Execution Time (2015-02-17 21:53:39 UTC)
loading tasks 90ms ▇ 1%
newer:copy:app 8s ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 96%
copy:app 141ms ▇ 2%
Total 8.3s
Completed in 93.949s at Tue Feb 17 2015 21:53:47 GMT+0000 (UTC) - Waiting...
HTML changed: www/templates/tab-dash.html
What is your pc configuration ?
Vagrant with 4 gig ram in Virtualbox, running on Ubuntu 12.04
Gijobs: As said if I do changes in www/ directory directly, restart happens in about 10s. Typically I don't need any Sass building or staff like this as I'm workin' on controllers, services, html-pages, etc.
Can't there be a grunt serve:develop
task that just copies app to www folder and that's it. Or is that already the intended behaviour? I don't understand where the 93s in time come from?
The reason it is so fast when you make changes in the www folder is the Ionic CLI. This generator has the CLI integrated directly. So after the Generator builds the WWW directory, it is using Ionic's CLI to watch the WWW directory, and Grunt is watching the app directory. So Grunt will detect your changes in /app, and when you save them grunt will load them into /www, and Ionic cli detects the changes in /www, and reloads the browser serve with the updated files.
So when you only make changes to the WWW, you are in effect doing regular Ionic development. If you start doing this, you are going to start losing your changes, because the next time you run grunt serve
, your changes in WWW are going to get wiped out.
The intended behavoir of grunt serve
is that when you save a unique file, grunt will reload that unique file into the www (uncompressed). If you want a compressed www, you need to run grunt compress
first.
And the issue you are having with time. I think there is something wrong with your environment. After running grunt serve
for the first time, any times after that it runs for me in under 5 seconds.
I'm experiencing this as well on much heftier system specs. From CTRL-S to browser reload is about 10 seconds, it appears as though the watcher is passing all files regardless of modified time. (Windows 8.1)
I'm seeing the same behavior. It first recognizes that one file changed, but then seems to say everything changed. Maybe the first is grunt saying the app file changed, and the others is ionic saying the www files changed (since grunt copied them over). A more incremental copy here would be extremely useful and much faster I think.
Seeing the same problem with Windows 10. The task is configured to only copy newer files.
watch: {
bower: {
files: ['bower.json'],
tasks: ['wiredep', 'newer:copy:app']
},
html: {
files: ['<%= yeoman.app %>/**/*.html'],
tasks: ['newer:copy:app']
},
images: {
files: ['<%= yeoman.app %>/**/*.{png,jpg,jpeg,gif,webp,svg}'],
tasks: ['newer:copy:app']
},
js: {
files: ['<%= yeoman.app %>/**/*.js'],
tasks: ['newer:copy:app', 'newer:jshint:all']
},
compass: {
files: ['<%= yeoman.app %>/<%= yeoman.styles %>/**/*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer', 'newer:copy:tmp']
},
gruntfile: {
files: ['Gruntfile.js'],
tasks: ['ngconstant:development', 'newer:copy:app']
}
},
Having exactly the same problem (Win7). It takes ~60 seconds to reload the page after making some changes in the /app folder.
Running "copy:app" (copy) task
JS changed: C:\...\www\bower_components\angular-animate\angular-animate.js
File changed: C:\...\www\bower_components\angular-animate\README.md
File changed: C:\...\www\README.md
JS changed: C:\...\www\bower_components\angular-mocks\ngMockE2E.js
JS changed: C:\...\www\bower_components\angular-mocks\ngAnimateMock.js
It seems like it copies all (unchanged) bower_components again into the www folder
Exact same problem, (Win10 tablet) It took too long to reload. Running "newer:copy:app" (newer) task was always immediately followed by Running "copy:app" (copy) task. All bower_components files were copied every time newer:copy:app was run.
I gave up fixing this problem and found a workaround. Switched from grunt-contrib-copy to grunt-sync, works like magic. I haven't checked how this affects minify or other build tasks yet.