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導入しよう!
の話
Gruntとは?
• Node.jsで動くタスクランナー
• Webフロントエンドにフォーカスした
ビルドツール
• プラグイン指向
何ができるの?
• Webリソース最適化処理の自動化
• JS/CSSファイルの結合、圧縮
• CSSスプライト用画像+CSSファイルの生成
• PNG/JPEGファイルサイズの最適化
• AltJS/Sass/LESSコンパイルの自動化
• ...
Webリソース最適化の重要性は
書籍を参考ください
どうやって使う?
• コマンドラインでインストール
• 設定ファイル(Gruntfile.js)を記述
• コマンドラインで実行
設定ファイル例
// Gruntfile.js
module.exports = function(grunt){
grunt.registerTask('say_hello', 'say hello', function(){
grunt.l...
なぜ使うのか?
• 繰り返し実行する処理の自動化
• タスクの設定ファイル化
ファイル化の利点
• 複雑な実行パラメータ覚える必要なし
• バージョン管理できる
• チームメンバー間で共有できる
• 「開発ワークフローの共有」による
「属人化の排除」
Gruntプラグイン
• 多くのプラグインが公開されており、
簡単にインストールして利用できる
• パラメータを指定するだけで利用可能
• grunt-* で公開されているので検索簡単
• grunt-contrib-* は公式プラグイン
公式プラグイン
• grunt-contrib-concat ファイル結合
• grunt-contrib-uglify jsのminify
• grunt-contrib-mincss cssのminify
• grunt-contrib-c...
Gruntインストール
• 「Grunt 導入」とかでググって参考!
• コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
• ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
• Web デ...
デモ
• インストールと実行
$ npm install -g grunt-cli
$ npm init
$ npm install grunt --save-dev
$ npm install grunt-contrib-concat --s...
プラグイン探し方
• http://gruntjs.com/plugins へアクセス
• npmリポジトリから grunt-* が抽出さ
れて一覧表示されている
プラグインの使い方
• たいてい公開リポジトリの README に
書いてある
• npmコマンド1発でページが開けるよ
• $ npm home grunt-contrib-uglify
設定ファイル書き方
• その前に Multi Tasks と ターゲット
• Multi Tasksは複数の設定を持つ
• 例えばファイル結合はjsとcssそれぞ
れ異なる設定で実行したいよね
concatプラグインはMulti Tasks
複数ターゲット例
grunt.initConfig({
concat: {
options: { /* 共通の設定 */ },
// jsターゲット、$ grunt concat:js で実行される
js: {
options: { /* js...
IN/OUTファイル指定
grunt.initConfig({
concat: {
compact_format: {
src: ["a.js", "b.js"],
dest: "min.js"
},
files_object_format: ...
古い形式の指定方法
grunt.initConfig({
concat: {
"min.1.js": ["a.js", "b.js"],
"min.2.js": ["c.js", "d.js"]
}
});
• 非推奨だが、古くからあるプラグイ...
カスタムタスク
// 複数のタスクを束ねる
grunt.registerTask("task_name", "description(optional)", ["a", "b", "c"]);
// 引数なし実行時のデフォルト実行タスク
gru...
定義済みタスク確認
• $ grunt --help
• grunt.registerTask()の省略可能な2番目
の引数は一覧出力時に表示される
最後にデモ
Gruntを導入しよう!の話
Upcoming SlideShare
Loading in …5
×

Gruntを導入しよう!の話

1,761 views

Published on

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

Published in: Technology
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Gruntを導入しよう!の話

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

×