ライブラリにあらず! 〜Google Closure Toolsの事始め〜

  • 3,260 views
Uploaded on

ありえるえりあ勉強会で使ったGoogle Closure Toolsの簡単な説明資料。

ありえるえりあ勉強会で使ったGoogle Closure Toolsの簡単な説明資料。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,260
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
8
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. ライブラリにあらず!∼Google Closure Toolsの事始め∼ 面白法人カヤック HTMLファイ部 比留間和也
  • 2. 自己紹介• 面白法人カヤックHTMLファイ部所属比留間 和也• 最近はJSばっかりで、あんまりHTML書いてません。
  • 3. ちょっと書きましたすべての人に知っておいてほしいHTML5 & CSS3 の基本原則 すべての人に知っておいてほしい スタイルシートデザインの基本原則
  • 4. Google Closure Toolsとは
  • 5. Google Closure Toolsは、いわゆる一般的なJavaScriptライブラリ
  • 6. ではありません
  • 7. GCTは3種の神器
  • 8. • Google Closure Library• Google Closure Compiler• Google Closure Template
  • 9. これら3つが組み合わさって初めて「Google Closure Tools」の真価が発揮される
  • 10. Google Closure Template
  • 11. SoyToJsSrcCompiler.jarというファイルを使います
  • 12. Buildする$ java -jar SoyToJsSrcCompiler.jar --shouldProvideRequireSoyNamespaces --outputPathFormat simple.js simple.soy
  • 13. Buildする$ java -jar SoyToJsSrcCompiler.jar --shouldProvideRequireSoyNamespaces --outputPathFormat simple.js simple.soy
  • 14. Google Closure Compiler
  • 15. 弊社社内でも最後の仕上げとして、圧縮するために使われたりしています
  • 16. CompileするSRC = js/hoge.js js/fuga.jsCOMBINE = js/hoge.prod.jsCOMPRESS = js/hoge.prod.min.js$(COMBINE) : $(SRC) cat $^ > $@ java -jar /Applications/gcc/compiler.jar --js $(COMBINE) --js_output_file $(COMPRESS).PHONY: cleanclean : rm -f $(COMBINE) $(COMPRESS) 弊社で使われているshell script
  • 17. CompileするSRC = js/hoge.js js/fuga.jsCOMBINE = js/hoge.prod.jsCOMPRESS = js/hoge.prod.min.js$(COMBINE) : $(SRC) cat $^ > $@ java -jar /Applications/gcc/compiler.jar --js $(COMBINE) --js_output_file $(COMPRESS).PHONY: cleanclean : rm -f $(COMBINE) $(COMPRESS) 弊社で使われているshell script
  • 18. Google Closure Library
  • 19. Google Closure Toolsの中でもコア機能Googleの集大成ともいえるライブラリ群
  • 20. Build $ python ./closure-library/closure/bin/build/ closurebuilder.py --root=./js --root=./closure-library --namespace="hoge" --output_mode=compiled --output_file=hoge.min.js --compiler_jar=/Applications/gcc/compiler.jar -f "--define=goog.DEBUG=false"圧縮のレベルを指定するオプション #-f "--compilation_level=ADVANCED_OPTIMIZATIONS"
  • 21. Build $ python ./closure-library/closure/bin/build/ closurebuilder.py --root=./js --root=./closure-library --namespace="hoge" --output_mode=compiled --output_file=hoge.min.js --compiler_jar=/Applications/gcc/compiler.jar -f "--define=goog.DEBUG=false"圧縮のレベルを指定するオプション #-f "--compilation_level=ADVANCED_OPTIMIZATIONS"
  • 22. • JavaScriptで手軽にクラスベース風の継承機能を提供• require的な各ファイルの依存関係を解決してくれるPythonベースのツール• 依存関係の解決から圧縮までをコマンドライン一発でやってくれるPythonベースのツール
  • 23. Google Closure Toolsは、こうしたツール群を駆使してつくり上げる巨大なフレームワーク
  • 24. ライブコーディング
  • 25. Appendix• Google Closure Tools• Google Closure Library• Google Closure Templates• Google Closure Compiler• Google Closure compilerをオンラインで• Closure Libraryによるアプリ開発のはじめ方
  • 26. ご清聴ありがとうございました