I recently wrote about how I switched from PhoneGap Build to using PhoneGap locally which involved tweaking my development process a little bit and figuring out what differences there were between the two approaches.
I’ve also written about how to minify an Ionic application for PhoneGap Build but this is another thing that is going to need to be changed when using a local version of PhoneGap. In the PhoneGap Build tutorial, I use Gulp and Grunt to create minified and uglified versions of the files required for the final build and only upload those to PhoneGap Build.
When using a local verison of PhoneGap though it will just take the entire contents of the www directory by default, which means the source files as well as the minified files will be inlcuded in the final package (which obviously defeats the purpose of doing it in the first place). So now I’m going to talk you through the differences – I won’t repeat what’s already in the other tutorial so check that out first and I’ll just cover the differences here.
###Using Cordova Hooks
An important concept to understand that is not present when using PhoneGap Build are Hooks. A hook is just a bit of code that gets executed at a certain point during the build process, for example:
- before_prepare
- after_prepare
- before_build
- after_build
You can create a folder for each of these in:
MyApp/hooks
to hold whatever code you want to execute. We will be using some hooks as part of the minification process, but I also recommend checking out Holly Schinsky’s blog post three Hooks your Cordova / PhoneGap project needs for more information. Holly has some great suggestions for hooks but I especially recommend that you implement the Icons and Splash screens hook as this is one that you will always need.
###A new method for minifying and uglifying
The only real difference between this method and the PhoneGap Build method is that we are going to be using hooks instead of Grunt. Because no build process occurs locally with PhoneGap Build we were manually triggering tasks that would minify and obfuscate the code before uploading it to PhoneGap Build. Now we can instead do all of that locally.
1. Install Cordova Uglify and mv
We will create the hooks to do what we need shortly, but first we need to install a couple of packages so that they can do the work they need. You will need to install Cordova Uglify so that we can obfuscate the code:
npm install cordova-uglify --save-dev
and mv so that the hook can move files around:
npm install mv --save-dev
2. Change your index.html file
If you followed along with the PhoneGap Build tutorial then your index.html will look similar to this:
<!-- build:js dist_js/templates.js -->
<script src="dist/dist_js/app/templates.js"></script>
<!-- endbuild -->
<!-- build:js dist_js/app.min.js -->
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/services.js"></script>
<!-- endbuild -->Since we’re going to be handling the minification in a hook now, let’s change the resulting file name of the concatenated file to app.js rather than app.min.js:
<!-- build:js dist_js/templates.js -->
<script src="dist/dist_js/app/templates.js"></script>
<!-- endbuild -->
<!-- build:js dist_js/app.js -->
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/services.js"></script>
<!-- endbuild -->3. Create the hooks
We will now need to create some hooks to handle minifying and obfuscating our code, and this will also take care of only including the minified files in the final build.
Agustin Haller has provided the hooks you will need to create, just add all of those files to the after_prepare folder in your hooks directory.
NOTE: When you install Cordova Uglify it will automatically create an uglify.js file in your after_prepare folder. Make sure that you rename and replace this with the file Agustin provides. The numbers at the start of the hooks files are important as it will affect the order in which they are executed.
4. Create a build
In the PhoneGap Build version, this is where we would run the Grunt tasks usually. But now we don’t need to do that at all, instead just run:
ionic build ios
or
ionic build android
and a that’s it! A minified and obfuscated version of your application will now be built.