Get Cordova Ready for Grunt and CoffeeScript

Cordova, Grunt and Coffee

You may reference to below if you deside to work with coffee instead of Javascript in Cordova project.

Prepare Cordova Helloworld Project

This guide is based on Hello World project which is generated by the following commands.

$ cordova create hello com.example.hello HelloWorld
$ cd hello
$ cordova platform add android
      

Install

Install coffee Command

$ npm install -g coffee
      

Install grunt-contrib-coffee Grunt Plugin

$ npm install grunt-contrib-coffee --save-dev
      

Generate Working Tree

Transform

www/js/index.js

to

src/www/js/index.coffee

in example project. Because, we are gotta remote all the javascript file in folder

www/js/

.

File

src/www/js/index.coffee

:

app = 
    initialize: () -> this.bindEvents()

    bindEvents: () ->
        document.addEventListener 'deviceready', this.onDeviceReady, false

    onDeviceReady: () ->
        app.receivedEvent 'deviceready'

    receivedEvent: (id) ->
        parentElement = document.getElementById id
        listeningElement = parentElement.querySelector '.listening'
        receivedElement = parentElement.querySelector '.received'

        listeningElement.setAttribute 'style', 'display:none;'
        receivedElement.setAttribute 'style', 'display:block;'

        console.log 'Received Event: ' + id
      

Update Gruntfile.coffee

module.exports = (grunt) ->
    grunt.initConfig
        pkg: grunt.file.readJSON 'package.json'
        coffee:
            options:
                bare: true
            build:
                expand: true
                cwd: 'src/www'
                src: ['**/*.coffee']
                dest: 'www'
                ext: '.js'
                extDot: 'first'

    grunt.loadNpmTasks 'grunt-contrib-coffee'
      

Now We Have

• src/

  folder as coffee scripts location

• src/www/js/index.coffee

  file that tranformed from

  www/js/index.js

  which is removed already.

• Gruntfile.coffee

  build with coffee tasks

• package.json

  which is updated with module

  grunt-contrib-coffee

Testing

$ grunt coffee
$ cordova install android