alastairparagas / cordova-minify

Cordova hook that uglifies and minifies your app's Javascript files, minifies CSS files and HTML files, and compresses your image files.

cordova-minify

Cordova hook that uglifies and minifies your app's Javascript files, minifies CSS files, and compresses your image files. It is derived from the work of Ross Martin's original cordova-uglify, with the added image compression and recursive search for your script and stylesheets inside your js/ and css/ folders in www. This DOES NOT compress the assets in your www folder, but rather, on your respective platform's www folders, so your development environment isn't touched, and your apps stay fast and slim!

Install

Install this package inside of your app's root folder with this command.

npm install cordova-minify --save-dev

The --save-dev flag is important! If you decide to work on another environment, cordova-minify cannot run without the original package and its dependencies! After install, an after_prepare folder will be added to your hooks folder with the cordova-minify.js script in it.

Some valid Cordova development questions...

Why not just use Grunt/Yeoman?

One can use Grunt/Yeoman, though I feel that those are more suited for building web applications/assets, whereas this NPM package is solely developed for Cordova and does not touch your development environment - being the www folder, but rather, only the produced assets. Also, I feel like pulling out Yeoman is an overkill for Cordova, which tends to be a repetitive build process from the start, whereas just pure Grunt configuration takes forever. With cordova-minify, install the plugin, and done!

Why minify/compress your CSS/Javascript/Images?

Though you are not improving network speeds considering that assets are not being transmitted over the internet (packaged in your app - duh), I feel that it will help to compress javascript, css, and images to reduce app size and promote performance improvements. App size is a problem for lower-end phones that have limited storage - I personally found this a problem with my Pantech Burst (Android 4.0 - Ice Cream Sandwich).

Usage

Once you have this hook installed it will compress your app's JavaScript and CSS when you run a cordova prepare <platform> or cordova build <platform> command. This hook does not change your assets that live in the root www folder; it will uglify the assets that get outputted to the platforms folder after a prepare or build.

By default the hook will uglify the JavaScript, CSS, and images in the <platform> www/js, www/css, and www/img of your project Take a look at this line in the hook to add more folders to be minified - optional. You can configure the hook to uglify/minify only for a release build, see here.

Requirements

Out of the box this hook requires Cordova 3.3.1-0.4.2 and above but it can work with versions 3.0.0 thru 3.3.0 if you manually indicate the path for the platforms directories on Android and iOS see here. This is because the CORDOVA_PLATFORMS environment variable was not added until version 3.3.1-0.4.2 (see this post by Dan Moore).

Future Development

• External Config file

  • Configuration of how image, css, and javascript files are compressed - abstraction away from underlying code, preventing more mess-ups.
    • https://github.com/kevva/imagemin for image compression
    • https://github.com/mishoo/UglifyJS2 for js compression/"uglification"
    • https://github.com/GoalSmashers/clean-css for css cleaning/compression
  • Folders to include for the whole image/css/javascript compression process

• HTML compression

• JSDoc HTML generation for sharing API information amongst developers

• Additional support for other platforms currently not supported - anything other than Android and iOS

• Configuration of how image, css, and javascript files are compressed in a configuration file for easier and cleaner implementation, preventing the developer from messing up with underlying code.

Quirks:

• On Linux and OSX: hooks folder needs to have permissions modified. Perform a chmod -R 755 /hooks to resolve this issue.

License

MIT

cordova-minify's Issues

Not working with Ionic - Failed to instantiate module starter due to: Unknown provider: t

So i tried to use this with Ionic Framework but it gives me an error:
Failed to instantiate module starter due to:
Error: [$injector:unpr] Unknown provider: t
full error: http://pastebin.com/8BdHkk1Q
And as someone else mentioned issue here, you can't remove this module correctly. Because its uninstalling wrong file name cordova-minify.js

Hook doesn't start. Node env error.

Hi! When I try to run cordova prepare ios I get

env: node\r: No such file or directory
Hook failed with error code 127: /Users/ma/Devel/ionictosmobileapp/hooks/after_prepare/minify.js

When I run in my term /usr/bin/env node it works fine.

Maybe you can help to figure out? Thanks.

OS X 10.10, node v0.10.32, Cordova 3.6.3-0.2.13

Error running on Mac

Your hook install fine on my PC, but it threw the following error while trying to use it on a Mac.

module.js:340
throw err;
^
Error: Cannot find module 'imagemin-gifsicle'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (/Users/mapometer/Documents/development/mobile_app/node_modules/cordova-minify/node_modules/image-min/index.js:165:27)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
Hook failed with error code 8: /Users/mapometer/Documents/development/mobile_app/hooks/after_prepare/minify.js

Manually installing the missing dependencies for image-min fixed the issue.

I also notice that image-min has not been updated for 6 months and that it's github page no longer exists. Github now redirects to the page for another NPM module 'imagemin' (no dash). This is at github.com/imagemin/imagemin.

Cannot find module 'image-min'

I installed trought NPM.
When I try to build the app the following errors occurs:

Resolved changing line 8 on /hooks/after_prepare/minify.js:

'image-min' to 'imagemin'

Before:

After:

Everything works fine now!

Not able to get working

Hello,

I installed the plugin by running "npm install cordova-minify --save-dev" in the root folder of my app. When running "cordova build ios", I see "Running command: .../app/hooks/after_prepare/minify.js .../app" but "ios/www" nor "android/assets/www" are minified. Am I doing something wrong? I'm running Cordova CLI 4.1.2 if that makes a difference.

npm uninstall leaves the hook behind

It looks like it tries to remove cordova-minify.js but the file is called minify.js.

Not working

I don't know still if it is a bug
but the installation succeed with no issue, but I don't see anything that can tell that the module is doing anything during or after the build.

I see the after_prepare js file.

is there something I can do to test if it working?

Node modules not being picked up

Hi, on windows (don't know if it happens on other OS's, but I guess not) minify.js halts on account of not finding module uglify.js (if I swap lines var UglifyJS = require('uglify-js'); var CleanCSS = require('clean-css'); it will complain it doesn't find clean-css). I'm guessing this is due to the fact it searches for the modules inside the hooks/after_prepare folder, and it can't find them: I suggest you change that to:

var UglifyJS = require(path.join("..", "..", "node_modules", "cordova-minify", "node_modules", 'uglify-js'));

(same goes for the clean-css and imagemin dependencies).
Cheers.

build failing after adding this to my project

Running command: ****/hooks/after_prepare/minify.js [directory_path]
Error: spawn EACCES

npm package is outdated?

Hi, I noticed you fixed the imagemin requirement (formerly image-min) but the version installed via npm install cordova-minify still has require("image-min"), could you verify? Cheers and thanks for your work!

Using the hook causes Ionic to be unable to find modules.

I've compiled my application using the minify hook, but when I try to run it I get a message in the debugger that says it cannot be able to find the module:

Tried adding the .min.js file of ionic bundle, similar result:

Will Ionic support be added?

[minor] uglify-js must not already be present in the package.json of the app

uglify-js must not already be installed/present in the package.json of the app. Otherwise this line fails:

var UglifyJS = require('cordova-minify/node_modules/uglify-js');

Perhaps useful for the README. ;)

Too long path names on windows

The node-modules required by cordova-minify has image-min, which has too many dependencies. On windows, this results into a very deep folder structure, which creates a problem while trying to copy the "node-modules" to a different folder. It gives "Source path too long" error when trying to copy the node-modules to a new location.

execvp(): Permission denied error

Hello,

I've installed your hook. After typing "cordova prepare android", it gives me that error:

Running command: /projectpath/hooks/after_prepare/minify.js /projectpath
execvp(): Permission denied

Not minifying JS

Hi,
In my cordova-ionic app i have installed cordova-minify-2. It got succesfully installed but whenever i am trying to do ionic cordova build ios --release it's throwing me below error.

cordova-minify STARTING - minifying your js, css, html, and images. Sit back and relax!

Encountered an error minifying a file: /Users/bhushanrane/Movies/PushNotification/myApp 2/platforms/ios/www/js/app.js {"error":{"message":"Invalid flags supplied to RegExp constructor 'bhushanrane'","filename":"0","line":1,"col":0,"pos":0}}

After i tried to install cordova-minify. Then it's replacing my platform JS file containing undefined.

Kindly, help me on this. Let me know if i am missing anything.

My JS file:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform,$rootScope) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);

}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
}


// Push Notifications Code

          var options = {
              android: {
                senderID: "569340058386"//"678047950428"
              },
              ios: {
                alert: "true",
                badge: "true",
                sound: "true",
                clearBadge: "true"
              },
              windows: {}
          };

const push = PushNotification.init({
android: {
senderID: "569340058386"
},
browser: {
pushServiceURL: 'http://push.api.phonegap.com/v1/push'
},
ios: {
alert: "true",
badge: "true",
sound: "true"
},
windows: {}
});

push.on('registration', (data) => {
// data.registrationId
alert('Success--' + data.registrationId);
});

push.on('notification', (data) => {
// data.message,
// data.title,
// data.count,
// data.sound,
// data.image,
// data.additionalData
});

push.on('error', (e) => {
// e.message
});

// $cordovaPushV5.initialize(options).then(function() {

// // start listening for new notifications
// $cordovaPushV5.onNotification();
// // start listening for errors
// $cordovaPushV5.onError();

// $cordovaPushV5.register().then(function (result) {
// console.log("Register success " + result);
// $rootScope.pushDeviceToken = result;
// console.log("Device Token for Push"+result);
// //$cordovaToast.showShortCenter('Registered for push notifications');
// //$scope.registerDisabled=true;
// // ** NOTE: Android regid result comes back in the pushNotificationReceived, only iOS returned here
// // if (ionic.Platform.isIOS()) {
// // $scope.regId = result;
// // storeDeviceToken("ios");
// // }
// }, function (err) {
// alert("Register error " + err);
// });
// });
// $rootScope.$on('$cordovaPushV5:notificationReceived', function (event, notification) {
// if(notification.message){
// $cordovaDialogs.alert(notification.message, ALERT_MESSAGE.ALERT_TITLE, 'OK') .then(function () {
// });
// }
// });

// $rootScope.$on('$cordovaPushV5:errorOcurred', function (event, e) {
// $cordovaDialogs.alert(e, ALERT_MESSAGE.ALERT_TITLE, 'OK') .then(function () {
// });
// });

});
})

.config(function($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider

// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})

// Each tab has its own nav history stack:

.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})

.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})

.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');

});