Enviar búsqueda
Cargar
Gruntを導入しよう!の話
•
2 recomendaciones
•
1,898 vistas
Koji Nakamura
Seguir
2014/03/28 社内勉強会資料
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 22
Descargar ahora
Descargar para leer sin conexión
Recomendados
JS開発におけるTDDと自動テストツール利用の勘所
JS開発におけるTDDと自動テストツール利用の勘所
Koji Nakamura
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
[大図解]ピグライフはこう動いている
[大図解]ピグライフはこう動いている
Akihiro Kuwano
How To Drink Wsgi
How To Drink Wsgi
Atsushi Odagiri
MySQLやSSDとかの話・前編
MySQLやSSDとかの話・前編
gree_tech
MySQLやSSDとかの話 前編
MySQLやSSDとかの話 前編
Takanori Sejima
Grunt入門
Grunt入門
Tsuyoshi Maeda
Nodejs
Nodejs
Masanobu Masuda
Recomendados
JS開発におけるTDDと自動テストツール利用の勘所
JS開発におけるTDDと自動テストツール利用の勘所
Koji Nakamura
Grunt.jsを使った Expressの開発環境構築
Grunt.jsを使った Expressの開発環境構築
kamiyam .
[大図解]ピグライフはこう動いている
[大図解]ピグライフはこう動いている
Akihiro Kuwano
How To Drink Wsgi
How To Drink Wsgi
Atsushi Odagiri
MySQLやSSDとかの話・前編
MySQLやSSDとかの話・前編
gree_tech
MySQLやSSDとかの話 前編
MySQLやSSDとかの話 前編
Takanori Sejima
Grunt入門
Grunt入門
Tsuyoshi Maeda
Nodejs
Nodejs
Masanobu Masuda
今から始めるDocument db
今から始めるDocument db
Kazunori Hamamoto
Babelで先取り次世代javascript
Babelで先取り次世代javascript
Tsuyoshi Maeda
MySQLやSSDとかの話 その後
MySQLやSSDとかの話 その後
Takanori Sejima
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
Yuuki Namikawa
20140926 mt cloud_handson_seminar
20140926 mt cloud_handson_seminar
Six Apart
Jenkins javascript ci
Jenkins javascript ci
hisame64
MySQLやSSDとかの話 後編
MySQLやSSDとかの話 後編
Takanori Sejima
Reactとbabelで簡易タスク管理ツール作ってみた
Reactとbabelで簡易タスク管理ツール作ってみた
Tsuyoshi Maeda
Glance image-cacheコマンドを使ってみた
Glance image-cacheコマンドを使ってみた
harubelle
20131012 nodejs
20131012 nodejs
Amuro Nishizawa
ゼロから始めるBlob
ゼロから始めるBlob
Kazunori Hamamoto
OSC 2012.Cloud
OSC 2012.Cloud
Masaki Takeda
jsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
Yuki KAN
JAMstackは眠らない
JAMstackは眠らない
Kuniyoshi Tone
binary log と 2PC と Group Commit
binary log と 2PC と Group Commit
Takanori Sejima
第2回勉強会
第2回勉強会
Mugen Fujii
EWD 3トレーニング・コース #2 EWD 3 の概要
EWD 3トレーニング・コース #2 EWD 3 の概要
Kiyoshi Sawada
Nuxt0501ver1
Nuxt0501ver1
卓馬 三浦卓馬
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Más contenido relacionado
La actualidad más candente
今から始めるDocument db
今から始めるDocument db
Kazunori Hamamoto
Babelで先取り次世代javascript
Babelで先取り次世代javascript
Tsuyoshi Maeda
MySQLやSSDとかの話 その後
MySQLやSSDとかの話 その後
Takanori Sejima
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
Yuuki Namikawa
20140926 mt cloud_handson_seminar
20140926 mt cloud_handson_seminar
Six Apart
Jenkins javascript ci
Jenkins javascript ci
hisame64
MySQLやSSDとかの話 後編
MySQLやSSDとかの話 後編
Takanori Sejima
Reactとbabelで簡易タスク管理ツール作ってみた
Reactとbabelで簡易タスク管理ツール作ってみた
Tsuyoshi Maeda
Glance image-cacheコマンドを使ってみた
Glance image-cacheコマンドを使ってみた
harubelle
20131012 nodejs
20131012 nodejs
Amuro Nishizawa
ゼロから始めるBlob
ゼロから始めるBlob
Kazunori Hamamoto
OSC 2012.Cloud
OSC 2012.Cloud
Masaki Takeda
jsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
Yuki KAN
JAMstackは眠らない
JAMstackは眠らない
Kuniyoshi Tone
binary log と 2PC と Group Commit
binary log と 2PC と Group Commit
Takanori Sejima
第2回勉強会
第2回勉強会
Mugen Fujii
EWD 3トレーニング・コース #2 EWD 3 の概要
EWD 3トレーニング・コース #2 EWD 3 の概要
Kiyoshi Sawada
Nuxt0501ver1
Nuxt0501ver1
卓馬 三浦卓馬
La actualidad más candente
(20)
今から始めるDocument db
今から始めるDocument db
Babelで先取り次世代javascript
Babelで先取り次世代javascript
MySQLやSSDとかの話 その後
MySQLやSSDとかの話 その後
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
大規模化するピグライフを支えるインフラ ~MongoDBとChefについて~ (後編)
20140926 mt cloud_handson_seminar
20140926 mt cloud_handson_seminar
Jenkins javascript ci
Jenkins javascript ci
MySQLやSSDとかの話 後編
MySQLやSSDとかの話 後編
Reactとbabelで簡易タスク管理ツール作ってみた
Reactとbabelで簡易タスク管理ツール作ってみた
Glance image-cacheコマンドを使ってみた
Glance image-cacheコマンドを使ってみた
20131012 nodejs
20131012 nodejs
ゼロから始めるBlob
ゼロから始めるBlob
OSC 2012.Cloud
OSC 2012.Cloud
jsCafe v13 Grunt
jsCafe v13 Grunt
Web制作勉強会 #2
Web制作勉強会 #2
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
17 E-5 震災とHackとクラウドと ━ URIベースのCSLB
JAMstackは眠らない
JAMstackは眠らない
binary log と 2PC と Group Commit
binary log と 2PC と Group Commit
第2回勉強会
第2回勉強会
EWD 3トレーニング・コース #2 EWD 3 の概要
EWD 3トレーニング・コース #2 EWD 3 の概要
Nuxt0501ver1
Nuxt0501ver1
Similar a Gruntを導入しよう!の話
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
WordBench Saitama vol.6
WordBench Saitama vol.6
masaaki komori
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Tanaka Yuichi
Gruntの罪と罰
Gruntの罪と罰
kamiyam .
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
説明資料
説明資料
Tomoki Kobayashi
Hcmtg 1407
Hcmtg 1407
Tomoki Kobayashi
gulp勉強会@IVP
gulp勉強会@IVP
Daisuke Onoe
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
Toshimichi Suekane
CSS3の最新事情
CSS3の最新事情
Makoto Kato
Wordpress buddypress3
Wordpress buddypress3
Shoichi Otomo
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Angular の紹介
Angular の紹介
Neo Xrea
PHP on Cloud
PHP on Cloud
Akio Katayama
フロント作業の効率化
フロント作業の効率化
Yuto Yoshinari
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
Muyuu Fujita
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
Shuji Watanabe
Similar a Gruntを導入しよう!の話
(20)
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
WordBench Saitama vol.6
WordBench Saitama vol.6
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Gruntの罪と罰
Gruntの罪と罰
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
説明資料
説明資料
Hcmtg 1407
Hcmtg 1407
gulp勉強会@IVP
gulp勉強会@IVP
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
CSS3の最新事情
CSS3の最新事情
Wordpress buddypress3
Wordpress buddypress3
HTML5 on ASP.NET
HTML5 on ASP.NET
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Angular の紹介
Angular の紹介
PHP on Cloud
PHP on Cloud
フロント作業の効率化
フロント作業の効率化
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
小規模案件で作られた秘伝のタレ
小規模案件で作られた秘伝のタレ
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
Gruntを導入しよう!の話
1.
Grunt導入しよう! の話
2.
3.
Gruntとは? • Node.jsで動くタスクランナー • Webフロントエンドにフォーカスした ビルドツール •
プラグイン指向
4.
何ができるの? • Webリソース最適化処理の自動化 • JS/CSSファイルの結合、圧縮 •
CSSスプライト用画像+CSSファイルの生成 • PNG/JPEGファイルサイズの最適化 • AltJS/Sass/LESSコンパイルの自動化 • JSスクリプトのユニットテスト実行 • JS/CSSのlint(文法などの静的チェック)実行
5.
Webリソース最適化の重要性は 書籍を参考ください
6.
どうやって使う? • コマンドラインでインストール • 設定ファイル(Gruntfile.js)を記述 •
コマンドラインで実行
7.
設定ファイル例 // 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!'); }); };
8.
なぜ使うのか? • 繰り返し実行する処理の自動化 • タスクの設定ファイル化
9.
ファイル化の利点 • 複雑な実行パラメータ覚える必要なし • バージョン管理できる •
チームメンバー間で共有できる • 「開発ワークフローの共有」による 「属人化の排除」
10.
Gruntプラグイン • 多くのプラグインが公開されており、 簡単にインストールして利用できる • パラメータを指定するだけで利用可能 •
grunt-* で公開されているので検索簡単 • grunt-contrib-* は公式プラグイン
11.
公式プラグイン • grunt-contrib-concat ファイル結合 •
grunt-contrib-uglify jsのminify • grunt-contrib-mincss cssのminify • grunt-contrib-compass Sassとかcss sprite • grunt-contrib-qunit jsユニットテスト実行 • etc...
12.
Gruntインストール • 「Grunt 導入」とかでググって参考! •
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 • ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 • Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 • Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 • Gruntを使ってプロジェクトを自動化する、Myタスクメモ • 今更だけどやるgrunt入門編・インストールから基本的な使い方 • etc...
13.
デモ • インストールと実行 $ 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
14.
プラグイン探し方 • http://gruntjs.com/plugins へアクセス •
npmリポジトリから grunt-* が抽出さ れて一覧表示されている
15.
プラグインの使い方 • たいてい公開リポジトリの README
に 書いてある • npmコマンド1発でページが開けるよ • $ npm home grunt-contrib-uglify
16.
設定ファイル書き方 • その前に Multi
Tasks と ターゲット • Multi Tasksは複数の設定を持つ • 例えばファイル結合はjsとcssそれぞ れ異なる設定で実行したいよね concatプラグインはMulti Tasks
17.
複数ターゲット例 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 で全ターゲット実行 } });
18.
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の指定で差異あり(詳細割愛)
19.
古い形式の指定方法 grunt.initConfig({ concat: { "min.1.js": ["a.js",
"b.js"], "min.2.js": ["c.js", "d.js"] } }); • 非推奨だが、古くからあるプラグイン の README でこの記述が残っていたり する
20.
カスタムタスク // 複数のタスクを束ねる grunt.registerTask("task_name", "description(optional)",
["a", "b", "c"]); // 引数なし実行時のデフォルト実行タスク grunt.registerTask("default", ["a", "b", "c"]); // カスタムタスク (NodeJSのスクリプト) grunt.registerTask("default", function(){ // do something... }); • grunt.registerTaskメソッドで定義
21.
定義済みタスク確認 • $ grunt
--help • grunt.registerTask()の省略可能な2番目 の引数は一覧出力時に表示される
22.
最後にデモ
Descargar ahora