Download as PDF, PPTX
![デモ
• インストールと実行
$ 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](https://image.slidesharecdn.com/grunt-140327202500-phpapp02/75/Grunt-13-2048.jpg)
![複数ターゲット例
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 で全ターゲット実行
}
});](https://image.slidesharecdn.com/grunt-140327202500-phpapp02/75/Grunt-17-2048.jpg)
![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の指定で差異あり(詳細割愛)](https://image.slidesharecdn.com/grunt-140327202500-phpapp02/75/Grunt-18-2048.jpg)
![古い形式の指定方法
grunt.initConfig({
concat: {
"min.1.js": ["a.js", "b.js"],
"min.2.js": ["c.js", "d.js"]
}
});
• 非推奨だが、古くからあるプラグイン
の README でこの記述が残っていたり
する](https://image.slidesharecdn.com/grunt-140327202500-phpapp02/75/Grunt-19-2048.jpg)
![カスタムタスク
// 複数のタスクを束ねる
grunt.registerTask("task_name", "description(optional)", ["a", "b", "c"]);
// 引数なし実行時のデフォルト実行タスク
grunt.registerTask("default", ["a", "b", "c"]);
// カスタムタスク (NodeJSのスクリプト)
grunt.registerTask("default", function(){
// do something...
});
• grunt.registerTaskメソッドで定義](https://image.slidesharecdn.com/grunt-140327202500-phpapp02/75/Grunt-20-2048.jpg)
![[大図解]ピグライフはこう動いている](https://cdn.slidesharecdn.com/ss_thumbnails/pigglifegreexca-110817005057-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Gruntを導入しよう！の話
- 1.
- 3.
- 4. 何ができるの？ • Webリソース最適化処理の自動化 • JS/CSSファイルの結合、圧縮 •CSSスプライト用画像+CSSファイルの生成 • PNG/JPEGファイルサイズの最適化 • AltJS/Sass/LESSコンパイルの自動化 • JSスクリプトのユニットテスト実行 • JS/CSSのlint(文法などの静的チェック)実行
- 5.
- 6.
- 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. デモ • インストールと実行 $ npminstall -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コマンド１発でページが開けるよ • $ npm home grunt-contrib-uglify
- 16. 設定ファイル書き方 • その前に MultiTasks と ターゲット • 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.