![Gruntfile.js 設定例
module.exports = function(grunt) {
grunt.initConfig({
xxxxxx: {
//.........
}
});
grunt.loadNpmTasks('grunt-contrib-xxxxxx');
grunt.registerTask('default', ['xxxxxx']);
};](https://image.slidesharecdn.com/slide3-130524025208-phpapp01/85/Grunt-js-Express-12-320.jpg)
Grunt.jsを使った Expressの開発環境構築
- 2. 自己紹介 • かみやん (Twitter@kamiyam) • Meteorworks エンジニア • Webサービスつくってます http://nantokaworks.com
- 3. grunt とはなにか？
- 6. 山積みのタスk･･･ • CoffeeScriptのコンパイル • Sassのコンパイル • CSSファイルのコードミニファイ化･結合 • 画像ファイルの圧縮 • 画面の表示確認
- 7. キーワード • grunt: 起動など(gruntコマンド) • Gruntfile.js: gruntのタスク設定ファイル
- 8. キーワード • jQuery: JavaScriptのライブラリ • package.json: パッケージ構成ファイル
- 10. インストール $ npm install -g grunt-cli ※ gruntコマンドが利用可能となる。
- 12. Gruntfile.js 設定例 module.exports = function(grunt) { grunt.initConfig({ xxxxxx: { //......... } }); grunt.loadNpmTasks('grunt-contrib-xxxxxx'); grunt.registerTask('default', ['xxxxxx']); };
- 14. open & watch & LiveReload タスク
- 15. open & watch & LiveReload タスク 1，ブラウザを開いて
- 16. open & watch & LiveReload タスク 1，ブラウザを開いて 2，ファイルの変更(を監視)して
- 17. open & watch & LiveReload タスク 1，ブラウザを開いて 2，ファイルの変更(を監視)して 3，ブラウザをリロードして
- 18. open & watch & LiveReload タスク 1，ブラウザを開いて 2，ファイルの変更(を監視)して 3，ブラウザをリロードして 確認する!!
- 19. open & watch & LiveReload タスク 1，ブラウザを開いて 2，ファイルの変更(を監視)して 3，ブラウザをリロードして 超めんどくさいですよね。確認する!!
- 21. $ npm install $ grunt デモ 実行
- 32. • Viewファイルだけに限定する or しない • サーバサイドのjsファイルのwatch、 LiveReloadを許可するのか (supervisorのリロード時間とgruntのリ ロード時間が合わない･･･などなど)
- 34. grunt Proxy
- 35. まとめ • Grunt.js はNode.jsを用いた タスクランナー(便利屋) • リバースプロキシモジュールを使えば バックエンドの種類は問わない
- 36. ご静聴ありがとうございました