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

Get Cordova Ready for Grunt and CoffeeScript

时间: 2024-11-09 00:40:04

Get Cordova Ready for Grunt and CoffeeScript的相关文章

grunt 入门学习

前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的,一个全副武装的前端可能会是这样的: JSHint CSSLint Jade CoffeeScript RequireJS/SeaJS Compass/Stylus/Le

【grunt】两小时入门

目录: 1. 用途和场景 2.Grunt插件 3.相关资源 4.环境安装 5.开始学习 5.1 一个新项目 5.2 生成package.json 5.3 在项目中安装grunt和相关插件 5.4 Gruntfile语法 5.4.1 配置任务 5.4.2 加载插件 5.4.3 注册任务 5.5 为我们的项目配置gruntfile.js 5.6 执行任务 6.后续学习 1. 用途和场景 jshint代码检查 代码合并 代码压缩--js/css/html都可以 SASS/LESS编译css watch

Android开发学习--Ionic+Cordova 环境搭建

我们看 Ionic 能给我们提供什么?  一个样式库,你可以使用它 来 装饰你的 HTML 网页 ,看起来 想 移动程序的 界面,什么 header .content.footer.grid.list.这貌似没什么 实质性的东西, sencha touch ,jq 都能提供 .一个用 AngularJS 写的 工具库,姑且叫它 组件库吧.Ionic的 grid 设计的比较合理,比 bootstrap的 更强大.当然它 还包含 了angular-animate.angular-resource.a

搭建Node+NPM+Grunt+Ruby开发环境

序 最近尝试了一下CoffeeScript,和Sass,不得不说这两个搭配起来的确是不错的选择,熟悉以后基本上开发就比较快速了. 当然要开发这个首先需要搭建环境,这里就需要有Node.NPM.Grunt.Ruby. Node与NPM基本上是一套安装,有了Node环境后才能搭建后面的CoffeeScript环境:而Ruby是为了执行Sass编译命令所需要的环境,当然最后还有一个Grunt,这个是为了项目构建的方便,一体化构建,不用自己重复执行编译命令. Ruby Ruby,一种为简单快捷的面向对象

Grunt 认识

基本工作流: JS合并.JS压缩.CSS压缩.CSS Sprite.图片优化.测试.静态资源缓存(版本更新)... 基于工作流产生的工具: JSHint(jshint.com).CSSLint(csslint.net).jade(jade.tilab.com).coffeeScript(coffee-script.org/).requireJs/seaJs.compass/less/sass ... Grunt就是解决各种工具组合而形成系统工作流的解决方案 安装 nodeJs --> npm -

Grunt 之 使用 JavaScript 语法检查工具 jshint

前端开发环境准备好了,我们准备开始进行开发. 前端开发的主力语言是 JavaScript,这是一种脚本语言,没有编译器,也就没有了编译器带给我们的语法检查,怎样保证代码的质量呢?jshint 是一个强大的工具. 1. 概要说明 官方地址:http://jshint.com/ GitHub 地址:https://github.com/jshint/jshint JSHint 是一个使用 JavaScript 编写的 JavaScript 的代码质量检查工具,主要用来检查代码质量以及找出一些潜在的代

grunt入门讲解1:grunt的基本概念和使用

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node.js 被认为是不稳定的开发版.之前,在用grunt来合并文件时,老是报错,原因是node.js的版本太低了. 在安装grunt之前,你需要先将Grunt命令行(CLI)安装到全局环境中. npm install -g grunt-cli 上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就

cordova3.X 运用grunt生成plugin自定义插件骨架

Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码. 一.安装cordova npm install -g cordova 二.创建项目 cordova create hello com.blue.sky.hybrid.app.hello HelloWorld 三.添加平台支持 cd hello cordova pl

前端自动化工具 grunt 插件的简单使用(一)

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe