どうもです。
最近、話題の(?)enchant.jsを触っていますです。

enchant.jsって何!?とか、enchant.jsの使い方などなどは色々なブログで紹介されているので、そちらを見てください。
enchant.js 怒涛の 100 tips ←この記事とかすごいです。基本が網羅されてる。

で、今回は大規模なjavascriptの開発について覚え書き。

enchant.jsのドキュメントやチュートリアルを見ていると、基本的に1ファイルにまとめて書かれており、何も工夫せず開発を行うと保守など不安です。。

単にファイルを分けただけでは複数のファイルを読み込む必要があるため、何か良い方法はないかと模索。
...ふとjQueryの開発コード(GitHub)を見てみると、Makefileなるものが!!

と言うことで、jQueryを真似て "make" する事にしました!

Makefileを作る

jQueryで使われているMakefileはnode.jsを利用しており、テストなども含まれているため、とりあえずファイルの結合とミニファイだけできるモノを作ってみました。
(ミニファイにはGoogle Closure Compilerをつかってます。)

SRC_DIR = src

PREFIX = .
DIST_DIR = ${PREFIX}/dist

BASE_FILES = ${SRC_DIR}/Assets.js\
        ${SRC_DIR}/StartScene.js\
        ${SRC_DIR}/ResultScene.js

MODULES = ${SRC_DIR}/intro.js\
        ${BASE_FILES}\
        ${SRC_DIR}/outro.js\
        ${SRC_DIR}/main.js

GAME = ${DIST_DIR}/game.js
GAME_MIN = ${DIST_DIR}/game.min.js

all: game min

game: ${GAME}

${GAME}: ${MODULES} ${DIST_DIR}
        @@echo "Building.."

        @@cat ${MODULES} | \
                sed 's/.function..ns..{//' | \
                sed 's/}...NameSpace..;//' > ${GAME}

min: game ${GAME_MIN}

${GAME_MIN}: ${GAME}
        @@echo "Minifying use Google Closure Compiler"

        @@curl -s \
                -d compilation_level=SIMPLE_OPTIMIZATIONS \
                -d output_format=text \
                -d output_info=compiled_code \
                --data-urlencode "js_code@${GAME}" \
                http://closure-compiler.appspot.com/compile \
                > ${GAME_MIN}

${DIST_DIR}:
        @@mkdir -p ${DIST_DIR}

.PHONY: all
    
# ほぼほぼjQueryからコピペ...。

これさえ用意しておけば、クラス毎にファイルを分けて開発する事ができるので修正時なども安心して作業が進められます!

node.jsがあればjQueryのMakefileをそのまま使ってもいけそうですね。
rubyのあるサーバーであれば "rake" を使って、もっと複雑な作業も簡単にできるだろうし。

ちなみに、enchant.jsの開発では rake が使われている模様。

感想

と言う訳で、「javascriptをコンパイルする」なんて知らなかった僕としては感動の嵐でした!

何も知らず叩いていたコマンド"make"がこんな便利なんて! Linuxってすげー!(´ж`;)

 
Recent Comment
Categories
Writer
  • hidetarou
  • acha_maro
  • gazza069
  • sin_ya
  • yossy222
  • marionnettezero
  • TUYO
  • shiovo
  • yani_arcana
  • momiji0510
  • keiko_www
  • toma_max
  • kyonmaru
  • __senta
  • kenzo
  • t_suzuki
  • hikari_f
  • macchii
  • mashu