ソースディレクトリ作成
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の環境ができました。
