Gruntを導入しよう!の話

  • 448 views
Uploaded on

2014/03/28 社内勉強会資料

2014/03/28 社内勉強会資料

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
448
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
2
Comments
0
Likes
2

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導入しよう! の話
  • 2. Gruntとは? • Node.jsで動くタスクランナー • Webフロントエンドにフォーカスした ビルドツール • プラグイン指向
  • 3. 何ができるの? • Webリソース最適化処理の自動化 • JS/CSSファイルの結合、圧縮 • CSSスプライト用画像+CSSファイルの生成 • PNG/JPEGファイルサイズの最適化 • AltJS/Sass/LESSコンパイルの自動化 • JSスクリプトのユニットテスト実行 • JS/CSSのlint(文法などの静的チェック)実行
  • 4. Webリソース最適化の重要性は 書籍を参考ください
  • 5. どうやって使う? • コマンドラインでインストール • 設定ファイル(Gruntfile.js)を記述 • コマンドラインで実行
  • 6. 設定ファイル例 // Gruntfile.js module.exports = function(grunt){ grunt.registerTask('say_hello', 'say hello', function(){ grunt.log.ok('hello!'); }); grunt.registerTask('say_goodbye', 'say goodbye', function(){ grunt.log.ok('goodbye!'); }); };
  • 7. なぜ使うのか? • 繰り返し実行する処理の自動化 • タスクの設定ファイル化
  • 8. ファイル化の利点 • 複雑な実行パラメータ覚える必要なし • バージョン管理できる • チームメンバー間で共有できる • 「開発ワークフローの共有」による 「属人化の排除」
  • 9. Gruntプラグイン • 多くのプラグインが公開されており、 簡単にインストールして利用できる • パラメータを指定するだけで利用可能 • grunt-* で公開されているので検索簡単 • grunt-contrib-* は公式プラグイン
  • 10. 公式プラグイン • grunt-contrib-concat ファイル結合 • grunt-contrib-uglify jsのminify • grunt-contrib-mincss cssのminify • grunt-contrib-compass Sassとかcss sprite • grunt-contrib-qunit jsユニットテスト実行 • etc...
  • 11. Gruntインストール • 「Grunt 導入」とかでググって参考! • コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 • ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 • Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 • Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 • Gruntを使ってプロジェクトを自動化する、Myタスクメモ • 今更だけどやるgrunt入門編・インストールから基本的な使い方 • etc...
  • 12. デモ • インストールと実行 $ npm install -g grunt-cli $ npm init $ npm install grunt --save-dev $ npm install grunt-contrib-concat --save-dev $ echo 'module.exports = function(grunt){ grunt.initConfig({ concat: { "min.js": ["a.js", "b.js"] } }); grunt.loadNpmTasks("grunt-contrib-concat"); };' > Gruntfile.js $ echo 'console.log("a");' > a.js $ echo 'console.log("b");' > b.js $ grunt concat
  • 13. プラグイン探し方 • http://gruntjs.com/plugins へアクセス • npmリポジトリから grunt-* が抽出さ れて一覧表示されている
  • 14. プラグインの使い方 • たいてい公開リポジトリの README に 書いてある • npmコマンド1発でページが開けるよ • $ npm home grunt-contrib-uglify
  • 15. 設定ファイル書き方 • その前に Multi Tasks と ターゲット • Multi Tasksは複数の設定を持つ • 例えばファイル結合はjsとcssそれぞ れ異なる設定で実行したいよね concatプラグインはMulti Tasks
  • 16. 複数ターゲット例 grunt.initConfig({ concat: { options: { /* 共通の設定 */ }, // jsターゲット、$ grunt concat:js で実行される js: { options: { /* jsターゲットの設定 */ }, src: ["a.js", "b.js"], dest: "min.js" }, // cssターゲット、$ grunt concat:css で実行される css: { options: { /* cssターゲットの設定 */ }, src: ["a.css", "b.css"], dest: "min.css" } // $ grunt concat で全ターゲット実行 } });
  • 17. IN/OUTファイル指定 grunt.initConfig({ concat: { compact_format: { src: ["a.js", "b.js"], dest: "min.js" }, files_object_format: { files: { "min.1.js": ["a.js", "b.js"], "min.2.js": ["c.js", "d.js"] } }, files_array_format: { files: [ {src: ["a.js", "b.js"], dest: "min.1.js"}, {src: ["c.js", "d.js"], dest: "min.2.js"} ] } } }); • filter/expandの指定で差異あり(詳細割愛)
  • 18. 古い形式の指定方法 grunt.initConfig({ concat: { "min.1.js": ["a.js", "b.js"], "min.2.js": ["c.js", "d.js"] } }); • 非推奨だが、古くからあるプラグイン の README でこの記述が残っていたり する
  • 19. カスタムタスク // 複数のタスクを束ねる grunt.registerTask("task_name", "description(optional)", ["a", "b", "c"]); // 引数なし実行時のデフォルト実行タスク grunt.registerTask("default", ["a", "b", "c"]); // カスタムタスク (NodeJSのスクリプト) grunt.registerTask("default", function(){ // do something... }); • grunt.registerTaskメソッドで定義
  • 20. 定義済みタスク確認 • $ grunt --help • grunt.registerTask()の省略可能な2番目 の引数は一覧出力時に表示される
  • 21. 最後にデモ