Improve assets setup in ionic framework

Hello everyone,

I stumbled upon ionic framework recently, and I find what you guys are trying to accomplish quite amazing!

I’ve been using the yeoman angular-generator for a while, and as I started testing your framework in the past few days I can tell you the first thing I’ve started missing right away is the use of grunt-usemin (which in gulpland is called gulp-htmlbuild)

As far as I can see your default setup includes 3 javascript files manually included in the main html file: app.js, controllers.js, services.js

Of course, ionic users can customise your gulpfile and accomplish what I’m about to explain, but I think it would be a very good default to have.

What if the ionic did what the angular-generator does, i.e. have an “app” directory with all the development assets (scripts, scss, fonts, images etc.), use gulp-htmlbuild to manually include js files in development mode (gulp serve), then concat/minify/revvify everything when building the output?

If you already have a standard for working with lots of assets (lots of js and scss files) I’d like to hear more, but right now as far as I can see I’d have to customise the gulpfile and have it watch new directories to then concatenate the files into the ones included in index.html


Hi @sformisano - I couldn’t agree more. Such a great framework with loads of features, but missing this key element.

@mhartington - it would be really great if the ionic team could come up with a standardised way of doing production/dev builds and also update what is in the www folder by default when creating a new app. At the moment, the www folder is full of extra js files and sass files we don’t want copied over each time we do a build. It slows things down and increases the app size. Maybe a template gulp file and associated CLI command/s…

Really interested to hear other people thoughts on this.
Many thanks

I’ve seen a few other posts discussing similar issues that may be useful (Grunt and Gulp):

I totally agree, this is something I would love to see as well.
Thankfully, we have the amazing @jbavari on the team now who has been kicking ass with CLI Updates.

We have a few open issues with our CLI addressing this and it is something we plan to add too.

All in good time, Rome wasn’t built in a day, Good things come to those who wait, etc, etc, etc


1 Like

Thanks for the response. This is great news. Looking forward to seeing this in the CLI.

Hopefully it will be configurable so we can strip out any unwanted 3rd party bower package files etc.

I’ve been working on this pretty much all of today. I have a pretty good setup so far, a couple kinks to work out with template caching, fonts and sharing responsibilities between a css and sass task. If you want my gulp file that I have so far email me at campers at gmail com. I’ll post it up when its all working.

Thanks @campers - I’ve started creating a gulp file also.
New to gulp and not much time this week, but hopefully have something sorted soon.
Likewise, I’ll post mine once I get it finished.


I finally got around to putting my gulpfile and associated files into a gist. I’m sure this can be done a lot better than I have implemented it but this works for me and is my first venture with Gulp and js build steps.

I went down the route of pulling out all my old content from the “www” folder and putting it in a new “source” folder. This included all the 3rd party bower files etc. So now my www folder has only minified/uglified files ready for deploy.

The downside is that the CLI no longer works properly when running ionic lib as it is looking for www/lib/ionic/bower.json

However, this is the only issue I have run into so far…

Using this has more than halved the size of my app source. It will be great when the CLI incorporates something to do all this as it will save a lot of people re-inventing the wheel and give us a standardised approach.

@mhartington or @jbavari1 - would you be able to give us any update on the progress or any insight as to on how it will work?

Many thanks to all those that posted their Gulp files or gists as it was such a help when learning how to do all this!

The issue with ionic lib can be fixed by changing the path in the .bowerrc

This is quite a gulp file!
I can chat with @jbavari1 abut this and get his opinion, since the CLI is his baby now.

Thanks @mhartington but unfortunately I already updated the .bowerrc file but it still gives the following error when running ionic lib. I’m running cli 1.3.19.

>$ ionic lib
Unable to load ionic lib version information
Local Ionic version: undefined  (<project folder>/www/lib/ionic/bower.json)
Latest Ionic version: 1.0.0-rc.3  (released 2015-04-13)
 * Local version is out of date 

It doesn’t seem to take the .bowerrc file into account.

On a separate note, I can see that there has been quite a bit of progress here. Looking forward to seeing the results!

There are a couple of similar threads here for anyone interested:

Any updates about this feature? I was using ionic 1 to develop an app and need to maintain it. It would be really helpful if ionic can provide such tool. I was doing the process again like all ionic programmers, google for ionic debug and release build, ionic minify, ionic, etc. It’s 2017 now and it’s really hard for me to filtering out what is still working.

@sformisano Do you have any new ideas about how to build a debug and production release?