Improve assets setup in ionic framework

sformisano · November 18, 2014, 12:49pm

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

Thoughts?

edd · January 6, 2015, 11:41am

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):

mhartington · January 6, 2015, 4:01pm

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

edd · January 6, 2015, 4:21pm

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.

campers · January 7, 2015, 2:31pm

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.

edd · January 7, 2015, 3:21pm

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.

edd · April 10, 2015, 1:42pm

Hi,

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.

gist.github.com

https://gist.github.com/EdL/b1922462fd33b15c5984

Ionic Gulp Build

This shows the folder layout for source and build directories after a RELEASE build

<root>
|
|- <all the other normal ionic app files>
|
|- project (this is a new folder to hold various project related files)
|    |-vendor-js.json
|    |-vendor-css.json
|    |-jshintrc.json

This file has been truncated. show original

config.json

{
	global:{
		build: <BUILD> // DO NOT EDIT This value is updated by the gulp build and defines whether it is dev or release
	},
	dev:{
		property1:'devValue1',
		property2:'devValue2'
	},
	release:{
		property1:'releaseValue1',

This file has been truncated. show original

gulpfile.js

var gulp = require('gulp'); // Gulp needed locally - sudo npm install gulp
var bower = require('bower'); // Bower needed locally - sudo npm install bower
var gutil = require('gulp-util');
var del = require('del'); // Cleans directory
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var ngAnnotate = require('gulp-ng-annotate'); // Add angularjs dependency injection annotations

This file has been truncated. show original

There are more than three files. show original

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!

mhartington · April 10, 2015, 2:39pm

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.

edd · April 13, 2015, 10:05pm

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:

JeffreyChen · April 7, 2017, 3:47am

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?