Git Product home page Git Product logo

cordova-uglify's Introduction

cordova-uglify

Cordova hook that allows you to uglify or minify your apps JavaScript and CSS. It is using UglifyJS2 for JavaScript compression and clean-css to minify CSS.

NPM

Install

Install the following package below inside of your apps root folder.

npm install cordova-uglify --save

After install an after_prepare folder will be added to your hooks folder with the uglify.js script in it. A JSON config file (uglify-config.json) for the script will be added to the hooks folder. The hook will automatically be given executable permission.

Usage

Once you have this hook installed it will compress your apps 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 output to the platforms folder after a prepare or build. By default the hook will uglify the JavaScript and minify CSS files by recursively searching the folders provided in the foldersToProcess in the uglify-config.json (relative to your project root directory). You can disable the recursive search by setting the recursiveFolderSearch to false in the JSON config file. If you want to process files only when building/preparing for release include --release in your CLI command like this - cordova prepare ios --release. Please see the note below about usage with Ionic 2.

Configuration

{
  "alwaysRun": false, // set to true to always uglify files
  "recursiveFolderSearch": true, // process all JS and CSS files found in foldersToProcess
  "foldersToProcess": [ // when recursiveFolderSearch is set to false only files in these directories will be processed
    "js",
    "css",
    "img",
    "build" // this is needed for Ionic 2 projects
  ],
  "uglifyJsOptions": { // pass options to UglifyJS2 (you can include more than these below)
    "compress": {
      "drop_console": true
    },
    "fromString": true,
    "mangle": true // set this to false for Ionic 2 projects
  },
  "cleanCssOptions": { // pass options to CleanCSS (you can include more than these below)
    "noAdvanced": true,
    "keepSpecialComments": 0
  }
}

Using cordova-uglify with Ionic 2

Ionic 2 projects require a couple changes to the uglify-config.json.

  • Add build to the foldersToProcess property.
  • Set mangle to false in the uglifyJsOptions.

Where did image compression go?

As of 0.2.6 I removed the imagemin package because the version that this hook depended on was causing issues in NPM 3 and higher. There is a newer version of imagemin available and it has been made more modular by splitting the compression for each image type into its own package. Image compression was outside the scope of what I wanted to do with this hook anyways so I may make a hook in the future that focuses just on that. I don't plan to add image compression back to this hook so if you need it you'll want to use 0.2.5 or lower.

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

  • HTML compression

License

MIT

cordova-uglify's People

Contributors

rossmartin avatar stefanomagrassi avatar intuitisoft avatar mrichie avatar santino-wu avatar timothystewart6 avatar maftieu avatar taivo avatar

Watchers

James Cloos avatar Matthieu Caneill avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.