Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

grunt.jsのススメ

2,426 views

Published on

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

Published in: Technology
  • Be the first to comment

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でバージョン管理する必要あ り

×