grunt.jsのススメ海賊 渋谷 貴裕
背景• 近年のソーシャルゲームはリッチ化している• いかに待ち時間を少なくユーザーに提供するかが重要• そこでcssやjsの圧縮が高速化に貢献    問題:CSSやjsの圧縮(難読化)をし忘れてしまう!             自動化したい!
gruntとは• そこでgrunt• gruntとは… コマンドラインで使用するタスクベースのビルドツールのこと• 設定ファイル上で指定したファイルに対してminifyのような タスクを割り当てコマンドラインから実行できる!タスク例難読化、Sa...
demo
pros/cons• cssは更新されたファイルのみ難読化してくれる(comapssのおか  げ)• jsは設定ファイルで切り分けてあげないと全jsファイルに圧縮が  走ってしまう  • 切り分けするには全jsファイルを、設定ファイルに記述しな...
インストール手順• wiki参照• node.jsが必要• 最近gruntからgrunt-cliに移行した• gruntの開発速い
インストールしたモジュール• grunt-contrib-compass   • compassをgruntで使用するためのモジュール   • compass→cssのフレームワークライブラリ• grunt-contrib-uglify   •...
0.3から0.4への変更点• 設定ファイルがgrut.jsからGruntfile.jsにリネーム   • Gruntfile.coffeeでも大丈夫です。• grunt.registerHelperの廃止• grunt.registerTask...
Gruntfile.js• https://gist.github.com/4314906#file-gruntfile-js
結論• Gruntを使えば自動でタスクを実行できる• js全部に圧縮走ってしまう→要対応• 開発が速いので今後の動向をチェックする必要あり• stableな環境を求めてpackage.jsonでバージョン管理する必要あ  り
Upcoming SlideShare
Loading in …5
×

grunt.jsのススメ

2,284 views
2,250 views

Published on

チーム内パワーランチで発表したgrunt.jsの紹介資料です

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,284
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

grunt.jsのススメ

  1. 1. grunt.jsのススメ海賊 渋谷 貴裕
  2. 2. 背景• 近年のソーシャルゲームはリッチ化している• いかに待ち時間を少なくユーザーに提供するかが重要• そこでcssやjsの圧縮が高速化に貢献 問題:CSSやjsの圧縮(難読化)をし忘れてしまう! 自動化したい!
  3. 3. gruntとは• そこでgrunt• gruntとは… コマンドラインで使用するタスクベースのビルドツールのこと• 設定ファイル上で指定したファイルに対してminifyのような タスクを割り当てコマンドラインから実行できる!タスク例難読化、SassやCoffeeScriptのコンパイル、画像最適化など…
  4. 4. demo
  5. 5. pros/cons• cssは更新されたファイルのみ難読化してくれる(comapssのおか げ)• jsは設定ファイルで切り分けてあげないと全jsファイルに圧縮が 走ってしまう • 切り分けするには全jsファイルを、設定ファイルに記述しな ければならない • grunt0.4.0から「grunt.file.watchFiles」で更新があったファ イルを取得可能(この機能削除されました)
  6. 6. インストール手順• wiki参照• node.jsが必要• 最近gruntからgrunt-cliに移行した• gruntの開発速い
  7. 7. インストールしたモジュール• grunt-contrib-compass • compassをgruntで使用するためのモジュール • compass→cssのフレームワークライブラリ• grunt-contrib-uglify • uglify.js を用いてjsを圧縮するためのモジュール• grunt-contrib-watch • 監視するためのモジュール
  8. 8. 0.3から0.4への変更点• 設定ファイルがgrut.jsからGruntfile.jsにリネーム • Gruntfile.coffeeでも大丈夫です。• grunt.registerHelperの廃止• grunt.registerTaskのエイリアス記法が変更 • grunt.registerTask(default, [jshint, nodeunit, concat]);という 感じで、第2引数が配列になってます。• コンフィグの記述変更 • <config:prop.subprop> → <%= prop.subprop %> • <json:file.json> → grunt.file.parseJSON(file.json) • <file_template:file.js> → grunt.template.process(grunt.file.read(file.js))
  9. 9. Gruntfile.js• https://gist.github.com/4314906#file-gruntfile-js
  10. 10. 結論• Gruntを使えば自動でタスクを実行できる• js全部に圧縮走ってしまう→要対応• 開発が速いので今後の動向をチェックする必要あり• stableな環境を求めてpackage.jsonでバージョン管理する必要あ り

×