② PhoneGap + Gruntjsの開発環境構築

前回の続きでPhoneGap + Gruntjsの環境を作ってみます。

ソースディレクトリ作成

coffee, jade, lessやstaticファイル用のフォルダを作りました。
それと「cordova.js」ファイルを「wwwsrc/static」にコピーしておきます。

$ cd ios_demo
$ mkdir -p wwwsrc/coffee
$ mkdir -p wwwsrc/jade
$ mkdir -p wwwsrc/less
$ mkdir -p wwwsrc/static
$ cp www/cordova.js wwwsrc/static/

こんな感じ

grunt-exec追加

前回「grunt-exec」プラグインインストールを忘れてしまいました。
「grunt-exec」をインストールします。

$ npm install --save grunt-exec

「package.json」に「grunt-exec」が自動に追加がされたのを確認します。

{                                    
  "name": "Demo",                    
  "version": "0.0.1",                
  "description": "BabukumaのPhoneGap + Gruntjsデモ",
  "author": "メールアドレス",        
  "dependencies": {                  
    "grunt": "~0.4.1",               
    "grunt-contrib-coffee": "~0.4.0",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-less": "~0.5.2",  
    "grunt-contrib-jade": "~0.4.0",  
    "grunt-contrib-uglify": "~0.1.2",                                                                                   
    "grunt-exec": "~0.4.2"           
  }                                  
} 

Gruntfile.coffee作成

次はGruntのビルドファイル作成を作成します。

# #####################################################################
#
# DEMO
#
# @author babukuma@gmail.com
#
# #####################################################################

module.exports = (grunt)->
  # grunt-contrib
  grunt.loadNpmTasks('grunt-contrib-coffee')
  grunt.loadNpmTasks('grunt-contrib-jade')
  grunt.loadNpmTasks('grunt-contrib-less')
  grunt.loadNpmTasks('grunt-contrib-uglify')
  grunt.loadNpmTasks('grunt-exec')

  # ##########################################################
  # Project configuration.
  # START : grunt.initConfig
  # ##########################################################
  grunt.initConfig
    # #########################################
    # exec
    # #########################################
    exec:
      clean:
        command: 'rm -rf www/*'
        stdout: true
        stderr: true
      copy:
        command: 'cp -R wwwsrc/static/* www/'
        stdout: true
        stderr: true
      run:
        command: './cordova/run --target="iPad"'
        stdout: true
        stderr: true

    # #########################################
    # Compile Coffeescript files
    # #########################################
    coffee:
      compile:
        options:
          bare: true
        files:
          "www/js/app.js":"wwwsrc/coffee/app.coffee"

    # #########################################
    # Minifying Javascript files
    # #########################################
    uglify:
      javascript:
        files:
          "www/js/app.js":"www/js/app.js"

    # #########################################
    # LESS
    # #########################################
    less:
      production:
        options:
          yuicompress: true
        files:
          "www/css/app.css":"wwwsrc/less/app.less"

    # #########################################
    # JADE -> HTML
    # #########################################
    jade:
      production:
        options:
          pretty: false
        files:
          "www/index.html": "wwwsrc/jade/index.jade"

  # ##########################################################
  # END : grunt.initConfig
  # ##########################################################


  # default task
  grunt.registerTask('default', ['exec:clean', 'coffee', 'less', 'jade', 'exec:copy', 'exec:run'])

  # clean task
  grunt.registerTask('clean', ['exec:clean'])

デモ用のファイル作成

「wwwsrc/jade/index.jade」

!!! 5
html(lang="ja")
  //- HEAD
  head
    meta(charset="utf-8")
    meta(http-equiv='pragma', content='no-cache')
    meta(http-equiv='cache-control', content='no-cache')
    meta(http-equiv='expires', content='0')
    meta(name="format-detection", content="telephone=no")
    meta(name="viewport", content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi")
    meta(name="apple-mobile-web-app-capable", content="yes")
    meta(name="apple-mobile-web-app-status-bar-style", content="black-translucent")
    title='DEMO'
    //- Cordova
    script(type="text/javascript", src="./cordova.js")
    //- app JS
    script(type="text/javascript", src="./js/app.js")
    //- CSS
    link(rel="stylesheet", href="./css/app.css")
  body
    #demoLabel Loading...

「wwwsrc/coffee/app.coffee」

window.onload = ->
  demoLabel = document.getElementById('demoLabel')
  demoLabel.innerHTML = 'Hello world!'

「wwwsrc/less/app.less」

#demoLabel {
  width: 500px;
  height: 100px;
  padding: 50px;
  background-color: yellow;
  font: bold 30pt #000000;
  text-align: center;
}

実行

gruntを実行するとビルド後iPadシミュレータが起動します。

$ grunt

クリンアップは

$ grunt clean

これで簡単にPhoneGap + Gruntjsの環境ができました。