grunt.jsのススメ

  • 1,995 views
Uploaded on

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

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

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
1,995
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
5
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

Transcript

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