Enviar pesquisa
Carregar
Grunt.jsを使った Expressの開発環境構築
•
11 gostaram
•
4,684 visualizações
kamiyam .
Seguir
Node.js勉強会 in 大阪
Leia menos
Leia mais
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 36
Baixar agora
Baixar para ler offline
Recomendados
React VR ことはじめ
React VR ことはじめ
Kazuhiro Hara
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
Node js 入門
Node js 入門
Satoshi Takami
Try micronaut
Try micronaut
賢太郎 前多
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
づや会 Vol4 Node.jsとphpのパフォーマンスを比較してみる
zuya
Node.js で Web アプリ開発
Node.js で Web アプリ開発
Tatsumi Naganuma
Grunt入門
Grunt入門
Tsuyoshi Maeda
[大図解]ピグライフはこう動いている
[大図解]ピグライフはこう動いている
Akihiro Kuwano
Mais conteúdo relacionado
Mais procurados
今から始めるDocument db
今から始めるDocument db
Kazunori Hamamoto
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
Yoshihiro Iwanaga
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
Yasunori Kirimoto
[2019 01-19] AzureDevOps LT
[2019 01-19] AzureDevOps LT
Igarashi Toru
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
Hiroyuki Kusu
FirebaseとNuxtでLPを作って見た
FirebaseとNuxtでLPを作って見た
Kenjiro Kubota
Babelで先取り次世代javascript
Babelで先取り次世代javascript
Tsuyoshi Maeda
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Node.js Hands-On
Node.js Hands-On
Akinari Tsugo
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Yahoo!デベロッパーネットワーク
Hello, Node.js
Hello, Node.js
Shin Sekaryo
Nodeについて
Nodeについて
Natsuki Yamanaka
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Client Side Balzorでツールを作ってみた
Client Side Balzorでツールを作ってみた
裕之 木下
サイト制作(Nuxt.js)学習実施要項
サイト制作(Nuxt.js)学習実施要項
IIHARA HODAKA
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
Ryuji Tamagawa
How To Drink Wsgi
How To Drink Wsgi
Atsushi Odagiri
Clack meetup #1 lt
Clack meetup #1 lt
Atsushi Odagiri
Reactとbabelで簡易タスク管理ツール作ってみた
Reactとbabelで簡易タスク管理ツール作ってみた
Tsuyoshi Maeda
Getting started with node.js
Getting started with node.js
kouzouman
Mais procurados
(20)
今から始めるDocument db
今から始めるDocument db
Node.js Tutorial at Hiroshima
Node.js Tutorial at Hiroshima
Node.jsでスクレイピングして可視化してみた
Node.jsでスクレイピングして可視化してみた
[2019 01-19] AzureDevOps LT
[2019 01-19] AzureDevOps LT
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
【東京Node学園祭2016】Node.js × Babel で AWS Lambda アプリケーションを開発する
FirebaseとNuxtでLPを作って見た
FirebaseとNuxtでLPを作って見た
Babelで先取り次世代javascript
Babelで先取り次世代javascript
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Node.js Hands-On
Node.js Hands-On
Node.jsでブラウザメッセンジャー
Node.jsでブラウザメッセンジャー
Hello, Node.js
Hello, Node.js
Nodeについて
Nodeについて
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Client Side Balzorでツールを作ってみた
Client Side Balzorでツールを作ってみた
サイト制作(Nuxt.js)学習実施要項
サイト制作(Nuxt.js)学習実施要項
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
丸の内MongoDB勉強会#20LT 2.8のストレージエンジン動かしてみました
How To Drink Wsgi
How To Drink Wsgi
Clack meetup #1 lt
Clack meetup #1 lt
Reactとbabelで簡易タスク管理ツール作ってみた
Reactとbabelで簡易タスク管理ツール作ってみた
Getting started with node.js
Getting started with node.js
Destaque
Gruntでフロントの生産性up
Gruntでフロントの生産性up
Kazuyoshi Goto
自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について
Seiko Kuchida
フロント開発をがんばるためにGulpとGruntに入門してみた
フロント開発をがんばるためにGulpとGruntに入門してみた
Shou Takenaka
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
leverages_event
Node.js Error & Debug Leveling
Node.js Error & Debug Leveling
kumatch kumatch
学校では教えてくれないWebセキュリティ
学校では教えてくれないWebセキュリティ
Yuto Maeda
Gruntを導入しよう!の話
Gruntを導入しよう!の話
Koji Nakamura
早く家へ帰るための Grunt入門 [+gulp紹介]
早く家へ帰るための Grunt入門 [+gulp紹介]
Masayuki Maekawa
Yeomanについて
Yeomanについて
jsugiyama
Backbone.js入門
Backbone.js入門
AdvancedTechNight
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
Destaque
(12)
Gruntでフロントの生産性up
Gruntでフロントの生産性up
自動化ツール「Grunt.js」について
自動化ツール「Grunt.js」について
フロント開発をがんばるためにGulpとGruntに入門してみた
フロント開発をがんばるためにGulpとGruntに入門してみた
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
Node.js Error & Debug Leveling
Node.js Error & Debug Leveling
学校では教えてくれないWebセキュリティ
学校では教えてくれないWebセキュリティ
Gruntを導入しよう!の話
Gruntを導入しよう!の話
早く家へ帰るための Grunt入門 [+gulp紹介]
早く家へ帰るための Grunt入門 [+gulp紹介]
Yeomanについて
Yeomanについて
Backbone.js入門
Backbone.js入門
はじめよう Backbone.js
はじめよう Backbone.js
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Semelhante a Grunt.jsを使った Expressの開発環境構築
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Tanaka Yuichi
Gruntの罪と罰
Gruntの罪と罰
kamiyam .
jsCafe v13 Grunt
jsCafe v13 Grunt
Shinya Sugo
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
Kiyoshi Sawada
RoR周辺知識15項目
RoR周辺知識15項目
saiwaki
【日本語版】Styler: Our Journey to GCP
【日本語版】Styler: Our Journey to GCP
MichaelFindlater
後期第二回ネットワークチーム講座資料
後期第二回ネットワークチーム講座資料
densan_teacher
PHP on Windows Azure in Open Source Conference
PHP on Windows Azure in Open Source Conference
Microsoft
A 2-1 gitwebmatrix 2 から使う node.js on windows azure
A 2-1 gitwebmatrix 2 から使う node.js on windows azure
GoAzure
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Akira Inoue
Webサイト・フロントエンドの高速化とgrunt.jsについて
Webサイト・フロントエンドの高速化とgrunt.jsについて
Tomo Fujita
PHP on Windows Azure
PHP on Windows Azure
Microsoft
PHP on Windows Azure
PHP on Windows Azure
Microsoft Openness Japan
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift
Etsuji Nakai
Dot netcore multiplatform 2
Dot netcore multiplatform 2
shozon
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
Infrastructure as code for azure
Infrastructure as code for azure
Keiji Kamebuchi
Semelhante a Grunt.jsを使った Expressの開発環境構築
(20)
Gruntでjava script前作業の自動化!
Gruntでjava script前作業の自動化!
Gruntの罪と罰
Gruntの罪と罰
jsCafe v13 Grunt
jsCafe v13 Grunt
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
EWD 3トレーニング・コース #1 Node.jsとGT.Mの統合方法
RoR周辺知識15項目
RoR周辺知識15項目
【日本語版】Styler: Our Journey to GCP
【日本語版】Styler: Our Journey to GCP
後期第二回ネットワークチーム講座資料
後期第二回ネットワークチーム講座資料
PHP on Windows Azure in Open Source Conference
PHP on Windows Azure in Open Source Conference
A 2-1 gitwebmatrix 2 から使う node.js on windows azure
A 2-1 gitwebmatrix 2 から使う node.js on windows azure
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Webサイト・フロントエンドの高速化とgrunt.jsについて
Webサイト・フロントエンドの高速化とgrunt.jsについて
PHP on Windows Azure
PHP on Windows Azure
PHP on Windows Azure
PHP on Windows Azure
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
試して学べるクラウド技術! OpenShift
試して学べるクラウド技術! OpenShift
Dot netcore multiplatform 2
Dot netcore multiplatform 2
TypeScriptへの入口
TypeScriptへの入口
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
Infrastructure as code for azure
Infrastructure as code for azure
Mais de kamiyam .
Socket.ioとBabylonJSで作ったIoT的ななにか
Socket.ioとBabylonJSで作ったIoT的ななにか
kamiyam .
Managing multi-package repositories
Managing multi-package repositories
kamiyam .
TypeScript + Express
TypeScript + Express
kamiyam .
プラベワークのススメ
プラベワークのススメ
kamiyam .
kyoto.js13
kyoto.js13
kamiyam .
HomeKitとNode.jsを使ってSiriでコントロールするなにか
HomeKitとNode.jsを使ってSiriでコントロールするなにか
kamiyam .
Kinectを使った インタラクティブコンテンツを作った話
Kinectを使った インタラクティブコンテンツを作った話
kamiyam .
Node.jsでKinectを触ろうとして色々しくじった話
Node.jsでKinectを触ろうとして色々しくじった話
kamiyam .
ヒカ☆ラボ@Osaka NodeBotsハンズオン
ヒカ☆ラボ@Osaka NodeBotsハンズオン
kamiyam .
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
kamiyam .
JavaScript Performance 20160723
JavaScript Performance 20160723
kamiyam .
JavaScriptが魅せる新たな世界
JavaScriptが魅せる新たな世界
kamiyam .
WordBench Osaka #48 About Calypso
WordBench Osaka #48 About Calypso
kamiyam .
Async Enhancement
Async Enhancement
kamiyam .
はじめてのVue.js
はじめてのVue.js
kamiyam .
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Framework
kamiyam .
Scalable Node.js with Redis Store
Scalable Node.js with Redis Store
kamiyam .
Node.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
kamiyam .
知っているつもりで実は知らない 拾う技術捨てる技術
知っているつもりで実は知らない 拾う技術捨てる技術
kamiyam .
PhpStormとGrunt.jsで作るCakePHP快適開発環境
PhpStormとGrunt.jsで作るCakePHP快適開発環境
kamiyam .
Mais de kamiyam .
(20)
Socket.ioとBabylonJSで作ったIoT的ななにか
Socket.ioとBabylonJSで作ったIoT的ななにか
Managing multi-package repositories
Managing multi-package repositories
TypeScript + Express
TypeScript + Express
プラベワークのススメ
プラベワークのススメ
kyoto.js13
kyoto.js13
HomeKitとNode.jsを使ってSiriでコントロールするなにか
HomeKitとNode.jsを使ってSiriでコントロールするなにか
Kinectを使った インタラクティブコンテンツを作った話
Kinectを使った インタラクティブコンテンツを作った話
Node.jsでKinectを触ろうとして色々しくじった話
Node.jsでKinectを触ろうとして色々しくじった話
ヒカ☆ラボ@Osaka NodeBotsハンズオン
ヒカ☆ラボ@Osaka NodeBotsハンズオン
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
JavaScript Performance 20160723
JavaScript Performance 20160723
JavaScriptが魅せる新たな世界
JavaScriptが魅せる新たな世界
WordBench Osaka #48 About Calypso
WordBench Osaka #48 About Calypso
Async Enhancement
Async Enhancement
はじめてのVue.js
はじめてのVue.js
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Framework
Scalable Node.js with Redis Store
Scalable Node.js with Redis Store
Node.js勉強会 Framework Koa
Node.js勉強会 Framework Koa
知っているつもりで実は知らない 拾う技術捨てる技術
知っているつもりで実は知らない 拾う技術捨てる技術
PhpStormとGrunt.jsで作るCakePHP快適開発環境
PhpStormとGrunt.jsで作るCakePHP快適開発環境
Grunt.jsを使った Expressの開発環境構築
1.
Grunt.jsを使った Expressの開発環境構築 Node.js勉強会 in 大阪 2013.5.25
2.
自己紹介 • かみやん (Twitter@kamiyam) •
Meteorworks エンジニア • Webサービスつくってます http://nantokaworks.com
3.
grunt とはなにか?
4.
Grunt.js JavaScript(Node.js)製タスクランナー
5.
Grunt.jsは(面倒な)タスクを 代わりに代行してくれるツール
6.
山積みのタスk・・・ • CoffeeScriptのコンパイル • Sassのコンパイル •
CSSファイルのコードミニファイ化・結合 • 画像ファイルの圧縮 • 画面の表示確認
7.
キーワード • grunt: 起動など(gruntコマンド) •
Gruntfile.js: gruntのタスク設定ファイル
8.
キーワード • jQuery: JavaScriptのライブラリ •
package.json: パッケージ構成ファイル
9.
package.json 一緒に利用するモジュール情報などを 記述する設定ファイル Node.jsで作成するすべての成果物は 一つのパッケージモジュールとして扱うため、 必須ではないがかならず添えておくようにする。
10.
インストール $ npm install
-g grunt-cli ※ gruntコマンドが利用可能となる。
11.
環境構築 $ vim Gruntfile.js
12.
Gruntfile.js 設定例 module.exports =
function(grunt) { grunt.initConfig({ xxxxxx: { //......... } }); grunt.loadNpmTasks('grunt-contrib-xxxxxx'); grunt.registerTask('default', ['xxxxxx']); };
13.
プロジェクトの内容、規模によってつ かうタスク(gruntのモジュール)を追 加していく。 jQueryのようにプラグインを追加す るイメージ
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.
デモ ダウンロード https://gist.github.com/kamiyam/4996713
21.
$ npm install $
grunt デモ 実行
22.
ちなみに似たようなことをする仲間に このようなおっさんがいます(ry!
23.
gruntもNode.jsのサーバを起動しています。 ここまではフロントエンド側で完結する話。
24.
Grunt.jsとExpressの連携
25.
どのようにして gruntとExpressを連携させるのか
26.
grunt Grunt.jsで起動したフロントサーバと Expressのバックエンドサーバの連携
27.
grunt Grunt.jsで起動したフロントサーバと Expressのバックエンドサーバの連携
28.
grunt Grunt.jsで起動したフロントサーバと Expressのバックエンドサーバの連携 Proxy
29.
リバースプロキシモジュールを使う(単体) ■ grunt-connect-proxy https://github.com/drewzboto/grunt- connect-proxy ※ 設定などの細かい内容はサイトを参照
30.
テンプレート生成モジュールgrunt-init を使う ■ grunt-init-express https://github.com/kamiyam/grunt-init- express
31.
フォルダ構成など各個人の癖もあり これが正解というものがない 例えば、
32.
• Viewファイルだけに限定する or
しない • サーバサイドのjsファイルのwatch、 LiveReloadを許可するのか (supervisorのリロード時間とgruntのリ ロード時間が合わない・・・などなど)
33.
使いこなせれば、バックエンドの言語を 問わず(例えば、PHPなどWordPressで も) 同じことが出来る。 Watch するファイルが変わるだけ。
34.
grunt Proxy
35.
まとめ • Grunt.js はNode.jsを用いた タスクランナー(便利屋) •
リバースプロキシモジュールを使えば バックエンドの種類は問わない
36.
ご静聴ありがとうございました
Baixar agora