Minification and uglification question ?

[okonon]

Quick question. How does one Minify and uglify your code?
This functionality is provided by yeoman generatior-ionic and I was wondering if there is something like that is offered by ionic-cli?

[okonon]

Here is the related, but closed issue #143
I think that process of minification and uglification is important even before ionic 1.0 release because tons of devs deploying ionic apps to production today.

Thanks.

[jbavari]

@softBarbarian

We'll be looking at adding this around version 1.3.1.

[okonon]

Great, not to bug you, but what is the ETA on 1.3.1?

[jbavari]

Currently, it's looking towards the end of January.

In the meantime, you might try my friend Ross' cordova-uglify.

[okonon]

Reopening, wrong button. Thanks, I will check it out. You saw this right?
This a @cdarken's gist from issue #143 :
https://gist.github.com/cdarken/daf8b983f70b66230a30

[mica16]

Personally, I left Gulp and copied (and lightly altered) this great Gruntfile:
https://github.com/diegonetto/generator-ionic/blob/master/Gruntfile.js
My app weighs now 8mo instead of 30mo.

[EdL]

Looking forward to seeing this added to the CLI - will be great to have it integrated rather than everyone trying to come up with their own way to create a release build - or worse, lots of people not even realising that they should be doing this.

[mica16]

lots of people not even realising that they should be doing this

=> really true
I think that this feature is really really needed regarding the obfuscation (role of uglify) of the application code in an Android context.
Otherwise, any smart Android users would be able to read the production code and start to detect some weaknesses.

[jbavari]

The challenge with this feature is making assumptions about the end users.

Do we make it optional for those who want it? Or for everyone?

Do we add it as a cordova hook? Or have it be run by users directly?

[cdarken]

Can't it be done like I suggested in issue #143, as hookable steps in ionic.project?
I believe that putting the sources directly in www was a wrong decision.
You should have put them by default in other dir, like app, or src.

[jbavari]

Yes, it could be done as hookable steps, for sure.

The thing is, you'd have to have the node modules available to do it.

I'm considering just adding cordova-uglify in the dependencies of the ionic starting app.

Alternatively, I could provide a command, something like ionic minify or ionic release, that would run all the uglify/minify stuff.

Just trying to figure out which direction to take.

[cdarken]

Can't it be done as an argument to ionic setup ? Like the optional step to add sass support?
Something like ionic setup minification.
I don't think hooking to cordova is the best solution, remaining in gulp teritory would be a much safer choice.

[jbavari]

Having it as a cordova hook would let users have it run every time they execute cordova run, thereby not needing to run it via gulp.

However, having it as a gulp task would let the user have full control. They would just need to remember to run it before cordova run

With your suggestion, ionic setup minification, do you think it would add the gulp tasks to the gulpfile?

[cdarken]

I see that for sass, everything is by default filled in, except that npm install is not executed, and when you run ionic setup sass, this is added to ionic.project:

 "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]

I think that this would be the correct approach for minification (or let's call it optimization, because as in my gist, you can also run a custom copy task to only copy what you need, for a recent app I reduced its size with about 6MB by copying only what's required).
A lot of extra stuff can be done, not only minification, but also you can run ng-annotate, usemin, etc.
Maybe for templates somebody can add template caching, for instance.

[jbavari]

To clarify - the steps you're describing a user might do:

• ionic setup optimization
• ionic.project file is added with gulpRunTasks (see changes below)
• Runs npm install for uglify-js, clean-css, ng-annotate
• When cordova run ios or cordova run android - these tasks are run before being copied to platforms 'optimized'

Add section to ionic.project file, something like this:

"gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ],
  "gulpRunTasks": [
     "sass",
     "minify"
  ]

The question is, if we did gulp tasks, how do we get them in the gulpfile of existing users?

[cdarken]

The steps seem fine to me.
For the migration of existing users, maybe a guide would be useful. A migration guide with info and code to be added to gulpfile.js.

[keithdmoore]

Any ETA on when/if this will materialize into a release ?

[okonon]

Today I have ran npm update -g ionic and it updated my ionic-cli to 1.3.7 I could not find a CHANGELOG for this release.

@jbavari, is this enhancement incorporated in 1.3.7?

[jbavari]

@softBarbarian - some of the other team members pushed those releases. I'm not entirely sure what was added. I'll update the changelog.

@keithdmoore - As far as the minification - I'm still trying to push for it coming up soon. I've been busy having to address crosswalk errors lately.

[okonon]

@jbavari - i know you guys are getting really close to 1.0 release and understand that you are very busy. However, i wanted to followup on the progress of this feature. it seems that 1.3.3 milestone that this feature was assigned did not have it.
I am wondering if there is a new milestone set for this to go in?

Thanks

[cdarken]

There is one single change that makes everything simpler: the addition of "documentRoot" in ionic.project. This way I just modified the scripts to output production code into www and then I run ionic build.
Edit: thanks for the work you're doing.

[w3apps]

+1 for the ability to change the root folder, this will easily fix this problem.

[EdL]

Hi @jbavari - don't want to bug you at all but just wondering if there was any update on this or thoughts as to how it's going to be implemented?

I'm currently using a separate "source" folder where I store what was originally in the www folder. I then use a gulpfile to minify, uglify, concatenate and then copy everything over to the www folder. From the forum I can see that several people are doing something similar.

This is working alright but an integrated "out of the box" solution would be awesome.

Thanks

[anwaramoon]

+1 for this.

[EdL]

Hi - just seen that this is being discussed on another thread #270

Also here #16

[lfv89]

Yep, this out of the box solution would be very helpful. Almost a month ago I volunteered to help the creation of this something like it (#270), but I think this is not a priority for ionic at least for now.

[keithdmoore]

I really wished this was a higher priority. The community could really use it. Because this functionality is missing, I find my self going back to using the Yeoman Ionic Generator when starting a new project.

[cdarken]

I will post an updated version of my gist when I have some time. As I said above, just by changing the value of "documentRoot" in ionic.project, everything becomes very simple.

[lfv89]

Yes. My small contribution was to add a "createDocumentRoot" property in ionic.project, covering the case when your project was just cloned and doesn't have yet your "output" folder.

[lfv89]

*** Since these "output" folders should be in your .gitignore

[keithdmoore]

@jbavari Any updates as to when/if ionic-cli will have these new build features?

[jbavari]

@keithdmoore I dont have a time estimate yet.

@vasconcelloslf had put in some work on a new gulpfile that would help solve all of those build min/uglify issues.

Would you mind taking a look and giving your input on his suggested build process?

Keep in mind - this will mainly affect the masses that download and use this tool. For starters, though, we can add it in as an experimental flag or command of its own.

You can find it in the comments here:

#270

[EdL]

Hi guys,

Sorry I'm a bit late to the party! I've been following these threads relating to a "build step" both on GitHub and the Ionic forum for a while now and been meaning to post my thoughts. Excuse the lengthy post.

First up, I think its great that this is going to be added in one way or another.

@vasconcelloslf - thanks for putting together your build process and sharing it. I have a gulp file I posted a while ago that I have been working with on and off - it's not quite as neat or finished as yours!

http://forum.ionicframework.com/t/improve-assets-setup-in-ionic-framework/12859/5
https://gist.github.com/EdL/b1922462fd33b15c5984

I have searched quite a bit through the forums and most people are using Gulp as the build tool either as a manual step or using watchers, so given that, I think Gulp would be the way to go.

I think the main ideas people agree on are the following:

Providing Dev and Release modes
Providing a way to supply different source and destination folders
Providing a way to list which resources, js, css files should be used

For both dev and release:

Sass build.
Copy files from source to destination - this will include js, css, fonts, images, other. Each in separate steps as they will probably be going in different locations.
Having watchers auto update the build destination files

Creating an index.html file referencing the correct destinations depending on whether it is dev or release - I'm still unsure of the best way to do this? Maybe gulp-html-replace ?
I see how @vasconcelloslf is doing it but would be interested if there are other opinions on this?

(Optionally could have a linting step e.g. gulp-jshint with jshint-stylish)

For release:

Concatenating files
Add AngularJS dependency injection annotations e.g. gulp-ng-annotate
Minifying
Uglifying
Renaming with .min.js or .min.css
(Optionally could have template html minification and injection e.g. gulp-ng-html2js or gulp-angular-templatecache)
(Optionally could have source maps e.g. gulp-sourcemaps, although personally I don't think I will use them if there is a dev mode)

Extra thoughts

The build step could be triggered by the addition of an attribute on the ionic serve, emulate or build commands.

e.g ionic build -b dev or ionic build -b release

I don't see the need for having a separate cordova hook, or for a different workflow when running ionic build vs ionic serve or emulate. They could all just take the same attribute and trigger the same build process but for dev or release depending what arg is passed.

I really like the idea of providing a setup for source and destination directories in the ionic.project files.
Note that running "ionic update" should be able to pickup the source directory and update the ionic libs in there, and running ionic serve, emulate or build, should pickup the build from the destination directory not be tied to the normal www directory.

I like @vasconcelloslf idea of having dev and release variables and a config file for these. You could say this isn't necessary on the build step as a user could load the relevant constants depending on if they have a dev or build flag set somewhere, but it would be nice if running the build step set a dev/release flag. e.g. set a "build: release" or "build: dev" in a config file somewhere that could then be used at runtime by an app to determine which set of constants to use.

@https://github.com/vasconcelloslf/ionic-starter-app#8-configure-the-constant-values-gulp

Links to the main forum posts on build steps

http://forum.ionicframework.com/t/improve-assets-setup-in-ionic-framework/12859/7
http://forum.ionicframework.com/t/ionic-app-dev-with-gulp-minify-compress-etc/8087/10
http://forum.ionicframework.com/t/my-restructure-of-the-ionic-apps/11184
http://forum.ionicframework.com/t/restructuring-from-www-to-app-folder-in-order-to-minify/14601/7

Thanks

Ed

[okonon]

@jbavari hello is there any update for this?

[keithdmoore]

@jbavari Any update on this?

[jbavari]

@keithdmoore I had a good branch going that included all the sass compilation/minification as well as html/js minification done in this branch.

Lately though, I've been working on the tooling for Ionic v2, which will lean more on the webpack side of things, and leave gulp up to the users to use if they so wish to leave config/customization to users.

Are you all still using your custom gulp tasks to build / minify things?

[lfv89]

Hi @jbavari

Yes, I still use my own custom gulp tasks to handle config variables, different environments and tasks like minification/concatenation, etc... And I still think that the user shouldn't have to worry about such basic and repetitive tasks that should come by default with an advanced framework as Ionic.

You said earlier in the thread that "The challenge with this feature is making assumptions about the end users.", but I don't see this as a bad thing, I see as a great advantage. For example, Rails embraced this concept and even coined the "Convention over Configuration" jargon, and it worked pretty well for them.

But hey, that's just my opinion. By the way, can you tell us more about these default ionic v2 tools that you have been working on?

[keithdmoore]

I tend to use the ionic generator. It's too much of a pain to write all that custom infrastructure code. The downside is that I can't use other ionic services. I agree with @vasconcelloslf

[lpotapczuk]

Interested in updates.

[antoineol]

Ionic V2 seems to run webpack on ionic build android and imposes the webpack configuration file name to be webpack.config.js (hardcoded).

The way I used to do that with Ionic 1 was to have my own cordova hook that reads the --release param (or any custom param), and chooses accordingly the right webpack config file (or eventually add '-p') to make the bundle with or without minification.

My webpack.prod.js was basically an import of the default (dev) config where the devtool (source-map) param was removed and UglifyJs options were added.

It is great to see that Ionic V2 includes the webpack build, but it is not flexible, and I am not even sure we can remove it.

So I am also interested in updates :)

[maiskovich]

Any news on this?

[jthoms1]

Thanks for opening this issue. We will be accomplishing minification within the gulp tasks that we publish to NPM. To accomplish this I am closing this issue and moving its contents to ionic-team/ionic-gulp-tasks#5.