Downloaded 19 times
![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/75/Grunt-js-Express-12-2048.jpg)
More Related Content
![[大図解]ピグライフはこう動いている](https://cdn.slidesharecdn.com/ss_thumbnails/pigglifegreexca-110817005057-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[2019 01-19] AzureDevOps LT](https://cdn.slidesharecdn.com/ss_thumbnails/2019-01-19-lt-190120032447-thumbnail.jpg?width=640&height=640&fit=bounds)
Grunt.jsを使った Expressの開発環境構築
- 1.
- 2. 自己紹介 • かみやん (Twitter@kamiyam) •Meteorworks エンジニア • Webサービスつくってます http://nantokaworks.com
- 3.
- 4.
- 5.
- 6. 山積みのタスk･･･ • CoffeeScriptのコンパイル • Sassのコンパイル •CSSファイルのコードミニファイ化･結合 • 画像ファイルの圧縮 • 画面の表示確認
- 7. キーワード • grunt: 起動など(gruntコマンド) •Gruntfile.js: gruntのタスク設定ファイル
- 8. キーワード • jQuery: JavaScriptのライブラリ •package.json: パッケージ構成ファイル
- 9.
- 10. インストール $ npm install-g grunt-cli ※ gruntコマンドが利用可能となる。
- 11.
- 12. Gruntfile.js 設定例 module.exports =function(grunt) { grunt.initConfig({ xxxxxx: { //......... } }); grunt.loadNpmTasks('grunt-contrib-xxxxxx'); grunt.registerTask('default', ['xxxxxx']); };
- 13.
- 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，ブラウザをリロードして 超めんどくさいですよね。確認する!!
- 20.
- 21. $ npm install $grunt デモ 実行
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. • Viewファイルだけに限定する orしない • サーバサイドのjsファイルのwatch、 LiveReloadを許可するのか (supervisorのリロード時間とgruntのリ ロード時間が合わない･･･などなど)
- 33.
- 34.
- 35. まとめ • Grunt.js はNode.jsを用いた タスクランナー(便利屋) •リバースプロキシモジュールを使えば バックエンドの種類は問わない
- 36.