-
Notifications
You must be signed in to change notification settings - Fork 651
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Minification and uglification question ? #168
Comments
Here is the related, but closed issue #143 Thanks. |
@softBarbarian We'll be looking at adding this around version 1.3.1. |
Great, not to bug you, but what is the ETA on 1.3.1? |
Currently, it's looking towards the end of January. In the meantime, you might try my friend Ross' cordova-uglify. |
Reopening, wrong button. Thanks, I will check it out. You saw this right? |
Personally, I left Gulp and copied (and lightly altered) this great Gruntfile: |
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. |
=> really true |
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? |
Can't it be done like I suggested in issue #143, as hookable steps in ionic.project? |
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 Just trying to figure out which direction to take. |
Can't it be done as an argument to ionic setup ? Like the optional step to add sass support? |
Having it as a cordova hook would let users have it run every time they execute However, having it as a gulp task would let the user have full control. They would just need to remember to run it before With your suggestion, |
I see that for sass, everything is by default filled in, except that npm install is not executed, and when you run
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). |
To clarify - the steps you're describing a user might do:
Add section to
The question is, if we did gulp tasks, how do we get them in the gulpfile of existing users? |
The steps seem fine to me. |
Any ETA on when/if this will materialize into a release ? |
Today I have ran @jbavari, is this enhancement incorporated in |
@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. |
@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 Thanks |
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. |
+1 for the ability to change the root folder, this will easily fix this problem. |
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 |
+1 for this. |
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. |
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. |
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. |
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. |
*** Since these "output" folders should be in your .gitignore |
@jbavari Any updates as to when/if ionic-cli will have these new build features? |
@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: |
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 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 For both dev and release: Sass build. 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 ? (Optionally could have a linting step e.g. gulp-jshint with jshint-stylish) For release: Concatenating files 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. 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 Thanks Ed |
@jbavari hello is there any update for this? |
@jbavari Any update on this? |
@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? |
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? |
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 |
Interested in updates. |
Ionic V2 seems to run webpack on 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 :) |
Any news on this? |
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. |
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?
The text was updated successfully, but these errors were encountered: