Minification and uglification question ?

[jthoms1]

From @okonon on December 22, 2014 4:18

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?

Copied from original issue: ionic-team/ionic-cli#168

[jthoms1]

From @okonon on December 29, 2014 14:23

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.

[jthoms1]

From @jbavari on January 3, 2015 0:33

@softBarbarian

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

[jthoms1]

From @okonon on January 5, 2015 13:56

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

[jthoms1]

From @jbavari on January 6, 2015 1:44

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

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

[jthoms1]

From @okonon on January 6, 2015 2:49

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

[jthoms1]

From @mica16 on January 7, 2015 0:58

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.

[jthoms1]

From @EdL on January 7, 2015 1:4

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.

[jthoms1]

From @mica16 on January 7, 2015 1:6

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.

[jthoms1]

From @jbavari on January 22, 2015 19:34

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?

[jthoms1]

From @cdarken on January 22, 2015 19:45

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.

[jthoms1]

From @jbavari on January 22, 2015 19:55

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.

[jthoms1]

From @cdarken on January 22, 2015 20:0

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.

[jthoms1]

From @jbavari on January 22, 2015 20:17

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?

[jthoms1]

From @cdarken on January 22, 2015 20:31

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.

[jthoms1]

From @jbavari on January 22, 2015 21:57

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?

[jthoms1]

From @cdarken on January 23, 2015 7:54

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.

[jthoms1]

From @keithdmoore on January 30, 2015 3:35

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

[jthoms1]

From @okonon on February 4, 2015 14:40

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?

[jthoms1]

From @jbavari on February 4, 2015 14:57

@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.

[jthoms1]

From @okonon on February 26, 2015 19:44

@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

[jthoms1]

From @cdarken on March 5, 2015 9:47

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.

[jthoms1]

From @w3apps on April 1, 2015 9:1

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

[jthoms1]

From @EdL on April 10, 2015 16:59

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

[jthoms1]

From @anwaramoon on April 12, 2015 22:27

+1 for this.

[jthoms1]

From @EdL on April 13, 2015 11:14

Hi - just seen that this is being discussed on another thread ionic-team/ionic-cli#270

Also here ionic-team/ionic-cli#16

[jthoms1]

From @lfv89 on April 19, 2015 17:57

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.

[jthoms1]

From @keithdmoore on April 24, 2015 13:51

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.

[jthoms1]

From @cdarken on April 24, 2015 13:58

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.

[jthoms1]

From @lfv89 on April 24, 2015 14:9

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.

[jthoms1]

From @lfv89 on April 24, 2015 14:10

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

[jthoms1]

From @keithdmoore on May 25, 2015 18:49

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

[jthoms1]

From @jbavari on May 26, 2015 17:21

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

ionic-team/ionic-cli#270

[jthoms1]

From @EdL on June 3, 2015 12:57

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

[jthoms1]

From @okonon on July 24, 2015 3:43

@jbavari hello is there any update for this?

[jthoms1]

From @keithdmoore on October 19, 2015 18:28

@jbavari Any update on this?

[dmackerman]

All the notifications.

[Zorgatone]

+1:+1:

I'd minify automatically just when building for the target platform, and not during testing with ionic serve

Note: keep UglifyJs with the mangle option to false to work with angular

[jdnichollsc]

My example for Ionic 1.x 👯 https://github.com/jdnichollsc/Ionic-Starter-Template

[jcyh0120]

any updates? Really need the feature to build develop and release.