Soumettre la recherche
Mettre en ligne
gulp勉強会@IVP
•
Télécharger en tant que PPTX, PDF
•
2 j'aime
•
2,932 vues
Daisuke Onoe
Suivre
gulp勉強会
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 51
Télécharger maintenant
Recommandé
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
[JavaScript][gulp.js] 一緒に楽しよう!gulp.jsのあれこれ
[JavaScript][gulp.js] 一緒に楽しよう!gulp.jsのあれこれ
Yasuhiro Murata
フロント開発をがんばるためにGulpとGruntに入門してみた
フロント開発をがんばるためにGulpとGruntに入門してみた
Shou Takenaka
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
Toshimichi Suekane
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
shigeki_ohtsu
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Toshimichi Suekane
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
Toshimichi Suekane
Recommandé
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
[JavaScript][gulp.js] 一緒に楽しよう!gulp.jsのあれこれ
[JavaScript][gulp.js] 一緒に楽しよう!gulp.jsのあれこれ
Yasuhiro Murata
フロント開発をがんばるためにGulpとGruntに入門してみた
フロント開発をがんばるためにGulpとGruntに入門してみた
Shou Takenaka
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
gulp + sass で目指せ倍速コーディング(第2回 gulpfile.jsの分割管理と画像作成の効率化)
Toshimichi Suekane
node-gypを使ったネイティブモジュールの作成
node-gypを使ったネイティブモジュールの作成
shigeki_ohtsu
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Retina対応 CSSスプライトを自動化しよう sprity版(東区フロントエンド勉強会 2015年 第2回) 補足資料
Toshimichi Suekane
イマドキのコーダー環境構築2016
イマドキのコーダー環境構築2016
Sou Lab
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
Toshimichi Suekane
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
Toshimichi Suekane
Gulp ことはじめ
Gulp ことはじめ
Kyohei Morimoto
FirebaseとNuxtでLPを作って見た
FirebaseとNuxtでLPを作って見た
Kenjiro Kubota
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Tsuyoshi Yamamoto
Capistrano in practice - WebCareer
Capistrano in practice - WebCareer
Kyosuke MOROHASHI
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
130207 kyotorb
130207 kyotorb
Yuki Shibazaki
マニアックツール紹介、マネジメントのKnife-Zero(Chef)とテストスイートInSpec
マニアックツール紹介、マネジメントのKnife-Zero(Chef)とテストスイートInSpec
Yukihiko SAWANOBORI
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Masashi Shinbara
Chef
Chef
yaasita
入門 Chef Server #biglobetechtalk
入門 Chef Server #biglobetechtalk
BIGLOBE Tech Talk
Ansibleで始めるinfraTDD(初級編)
Ansibleで始めるinfraTDD(初級編)
佐久本正太
Jjug 20140430 gradle_advanced
Jjug 20140430 gradle_advanced
Masatoshi Hayashi
PostgreSQL on Amazon EC2の可能性
PostgreSQL on Amazon EC2の可能性
Serverworks Co.,Ltd.
Server specのご紹介
Server specのご紹介
Akira Kaneda
Chef概論とレシピ実践入門
Chef概論とレシピ実践入門
Kazuto Ohara
Chef
Chef
Ishikawa Yuya
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
BIGLOBE Tech Talk
Webサーバのチューニング
Webサーバのチューニング
Yu Komiya
Gradleどうでしょう
Gradleどうでしょう
Takuma Watabiki
2016初夏のJavaScript祭り20160514
2016初夏のJavaScript祭り20160514
Seigo Tanaka
ES2015の今とこれから
ES2015の今とこれから
lion-man
Contenu connexe
Tendances
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
Toshimichi Suekane
Gulp ことはじめ
Gulp ことはじめ
Kyohei Morimoto
FirebaseとNuxtでLPを作って見た
FirebaseとNuxtでLPを作って見た
Kenjiro Kubota
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Tsuyoshi Yamamoto
Capistrano in practice - WebCareer
Capistrano in practice - WebCareer
Kyosuke MOROHASHI
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
130207 kyotorb
130207 kyotorb
Yuki Shibazaki
マニアックツール紹介、マネジメントのKnife-Zero(Chef)とテストスイートInSpec
マニアックツール紹介、マネジメントのKnife-Zero(Chef)とテストスイートInSpec
Yukihiko SAWANOBORI
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Masashi Shinbara
Chef
Chef
yaasita
入門 Chef Server #biglobetechtalk
入門 Chef Server #biglobetechtalk
BIGLOBE Tech Talk
Ansibleで始めるinfraTDD(初級編)
Ansibleで始めるinfraTDD(初級編)
佐久本正太
Jjug 20140430 gradle_advanced
Jjug 20140430 gradle_advanced
Masatoshi Hayashi
PostgreSQL on Amazon EC2の可能性
PostgreSQL on Amazon EC2の可能性
Serverworks Co.,Ltd.
Server specのご紹介
Server specのご紹介
Akira Kaneda
Chef概論とレシピ実践入門
Chef概論とレシピ実践入門
Kazuto Ohara
Chef
Chef
Ishikawa Yuya
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
BIGLOBE Tech Talk
Webサーバのチューニング
Webサーバのチューニング
Yu Komiya
Gradleどうでしょう
Gradleどうでしょう
Takuma Watabiki
Tendances
(20)
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
gulp + Slim テンプレートエンジンで HTML を効率よく書き出そう
Gulp ことはじめ
Gulp ことはじめ
FirebaseとNuxtでLPを作って見た
FirebaseとNuxtでLPを作って見た
Grails 2.0.0.M1の話
Grails 2.0.0.M1の話
Capistrano in practice - WebCareer
Capistrano in practice - WebCareer
イベント駆動プログラミングとI/O多重化
イベント駆動プログラミングとI/O多重化
130207 kyotorb
130207 kyotorb
マニアックツール紹介、マネジメントのKnife-Zero(Chef)とテストスイートInSpec
マニアックツール紹介、マネジメントのKnife-Zero(Chef)とテストスイートInSpec
ビルドサーバで使うDocker
ビルドサーバで使うDocker
Chef
Chef
入門 Chef Server #biglobetechtalk
入門 Chef Server #biglobetechtalk
Ansibleで始めるinfraTDD(初級編)
Ansibleで始めるinfraTDD(初級編)
Jjug 20140430 gradle_advanced
Jjug 20140430 gradle_advanced
PostgreSQL on Amazon EC2の可能性
PostgreSQL on Amazon EC2の可能性
Server specのご紹介
Server specのご紹介
Chef概論とレシピ実践入門
Chef概論とレシピ実践入門
Chef
Chef
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
開発エンジニアがChefで テスト駆動サーバー設定してみた #biglobetechtalk
Webサーバのチューニング
Webサーバのチューニング
Gradleどうでしょう
Gradleどうでしょう
En vedette
2016初夏のJavaScript祭り20160514
2016初夏のJavaScript祭り20160514
Seigo Tanaka
ES2015の今とこれから
ES2015の今とこれから
lion-man
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Masako Miyazaki
Sassを使った共同作業について
Sassを使った共同作業について
Kanako Urabe
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
Tsutomu Kawamura
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Asami Kamei
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
リクルートの利用事例から考える AWSの各サービスとセキュリティ
リクルートの利用事例から考える AWSの各サービスとセキュリティ
Recruit Technologies
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
AWSでのセキュリティ運用 ~IAM,VPCその他
AWSでのセキュリティ運用 ~IAM,VPCその他
Recruit Technologies
AWSでセキュリティを高める!
AWSでセキュリティを高める!
Serverworks Co.,Ltd.
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
Keisuke Imai
Angular1&2
Angular1&2
Kenichi Kanai
AWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFront
Amazon Web Services Japan
En vedette
(15)
2016初夏のJavaScript祭り20160514
2016初夏のJavaScript祭り20160514
ES2015の今とこれから
ES2015の今とこれから
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
【もくもく会】Windows環境でSassを使う!Gulp導入のキモ
Sassを使った共同作業について
Sassを使った共同作業について
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass勉強会 - メジャーなCSS設計紹介とDocBaseのCSS
Sass/Compass よくあるトラブルと 解決方法・回避方法
Sass/Compass よくあるトラブルと 解決方法・回避方法
リクルートの利用事例から考える AWSの各サービスとセキュリティ
リクルートの利用事例から考える AWSの各サービスとセキュリティ
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
AWSでのセキュリティ運用 ~IAM,VPCその他
AWSでのセキュリティ運用 ~IAM,VPCその他
AWSでセキュリティを高める!
AWSでセキュリティを高める!
Riot.jsに触れてみた話
Riot.jsに触れてみた話
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
Angular1&2
Angular1&2
AWS Black Belt Techシリーズ Amazon CloudFront
AWS Black Belt Techシリーズ Amazon CloudFront
Similaire à gulp勉強会@IVP
Gulp De wordpress in WordBench
Gulp De wordpress in WordBench
Kanako Kobayashi
Gruntを導入しよう!の話
Gruntを導入しよう!の話
Koji Nakamura
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
Kei Nakazawa
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Kondo Hitoshi
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
[AWS Summit 2012] クラウドデザインパターン#5 CDP バッチ処理編
[AWS Summit 2012] クラウドデザインパターン#5 CDP バッチ処理編
Amazon Web Services Japan
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン
Hiroyasu Suzuki
20131210 CM re:Growth - Infrastructure as Code から Full Reproducible Infrastru...
20131210 CM re:Growth - Infrastructure as Code から Full Reproducible Infrastru...
都元ダイスケ Miyamoto
densan2014-late01
densan2014-late01
Takenori Nakagawa
Front end develop environment
Front end develop environment
Ryuto Yasugi
PHP on Cloud
PHP on Cloud
Akio Katayama
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
WordBenchTokyo-20111126
WordBenchTokyo-20111126
webourgeon
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
Wordpress buddypress3
Wordpress buddypress3
Shoichi Otomo
Azure 高速サイトソリューション
Azure 高速サイトソリューション
Hiromasa Oka
About rails 3
About rails 3
issei126
自分達のサイボウズ office-を開発しよう
自分達のサイボウズ office-を開発しよう
Cybozucommunity
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Similaire à gulp勉強会@IVP
(20)
Gulp De wordpress in WordBench
Gulp De wordpress in WordBench
Gruntを導入しよう!の話
Gruntを導入しよう!の話
12.09.08 明星和楽2012 KLabハンズオンセッション
12.09.08 明星和楽2012 KLabハンズオンセッション
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
キャッチアップJavaScriptビルド -ビルドから見るJSの今/2016春
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
[AWS Summit 2012] クラウドデザインパターン#5 CDP バッチ処理編
[AWS Summit 2012] クラウドデザインパターン#5 CDP バッチ処理編
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
実践!AWSクラウドデザインパターン
実践!AWSクラウドデザインパターン
20131210 CM re:Growth - Infrastructure as Code から Full Reproducible Infrastru...
20131210 CM re:Growth - Infrastructure as Code から Full Reproducible Infrastru...
densan2014-late01
densan2014-late01
Front end develop environment
Front end develop environment
PHP on Cloud
PHP on Cloud
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
WordBenchTokyo-20111126
WordBenchTokyo-20111126
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Wordpress buddypress3
Wordpress buddypress3
Azure 高速サイトソリューション
Azure 高速サイトソリューション
About rails 3
About rails 3
自分達のサイボウズ office-を開発しよう
自分達のサイボウズ office-を開発しよう
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Dernier
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Dernier
(10)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
gulp勉強会@IVP
1.
Gulp勉強会@IVP
2.
Gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです
3.
切り口変えよう
4.
gulpでできること フロントエンドにまつわる作業を まとめて自動化できる
5.
Sass,Compassなどのコンパイル HTMLからmarkdown,プレーンテキストに変換
CSS中に点在したメディアクエリーをまとめる CSSベンダープリフィックスの管理 CSSプロパティ並び順整理 コードの連結 コードの圧縮 コードの整形 CSSスプライト生成 画像圧縮 markdownをPDFに変換 Webページのスクリーンショット撮影 画像サイズ変換 コード構文チェック Lint ファイル書き出し 圧縮/解凍 FTPアップロード 文字コード変換 実体参照変換 JSON,YAML,XML,PLIST,CSV の相互変換 HTMLテーブルをCSVに変換 サイトマップ作成 sitemap.xml生成 通知センターに通知 これらの作業をまとめて自動化できる! gulpで自動化できること(一部)
6.
gulpを使う前に
7.
Gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです
8.
Node.jsとは サーバー側で動作する Javascriptアプリケーションプラットホーム
9.
Node.jsとは(間違いがち) プログラミング言語ではない サーバーソフトではない
プログラミング言語のフレームワークではない ※ IISやapacheとは違うが、同じ役割をすることはできる
10.
Node.jsとは(できること) Javascriptで動く Windowsでも動く
サーバーで動く ファイルの読み書きもjavascriptでできちゃう DBとの連携もjavascriptでできちゃう
11.
Node.jsとは(技術的特徴) 非同期 (I/Oの処理結果を待たず処理を進める)
シングルスレッド (メモリ消費が少ないので速い) C/C++プラグインで拡張可能 イベントドリブン ノンブロッキングI/O(コールバック関数処理)
12.
Node.jsとは(技術的特徴) 非同期 (I/Oの処理結果を待たず処理を進める)
シングルスレッド (メモリ消費が少ないので速い) C/C++プラグインで拡張可能 イベントドリブン ノンブロッキングI/O(コールバック関数処理)
13.
npmについて node.jsのモジュール管理システム install/uninstallをすべてnpmで行う
各モジュールの依存関係を管理してくれる 自分で開発したモジュールも公開できる インストールにはlocalとglobalの2つがある
14.
そういえば
15.
今日の勉強会の名前、 「タスクランナーgulp」 って言ってなかったっけ? ビルドシステムヘルパー じゃなくない?
16.
ミスです
17.
タスクランナーとは 様々なタスクを自動的に実行し、 作業を効率化するツール
18.
それ同じじゃん
19.
タスクランナーといえば
20.
Gruntについて フロントエンドのタスクを自動化するツール プラグインが多数あり、組み合わせることで自動化
gulpより古い 処理の1つの単位を「タスク」と呼ぶため「タスク ランナー」と呼ばれる
21.
Gruntとgulpの違い Grunt gulp 単一のプラグインを組み合わせる
JSONでタスク定義を書く 学習コストが高い プラグインを組み合わせてタスクを作る javascriptで処理をつないでいく 学習コストが低い
22.
Gruntとgulpの違い Grunt gulp 単一のプラグインを組み合わせる
JSONでタスク定義を書く 学習コストが高い プラグインを組み合わせてタスクを作る javascriptで処理をつないでいく 学習コストが低い →オブジェクト指向っぽい →スクリプト言語っぽい
23.
記述方法の比較
24.
gulpの始め方(事前準備)
25.
事前準備(node.jsインストール) Windowsはインストーラを実行するだけ
26.
node.jsとnpmの確認
27.
事前準備(gulpインストール) //global install > npm
install gulp -g //local install //local installは対象のディレクトリで行う > npm install --save-dev gulp
28.
gulpの始め方(タスク作成)
29.
gulpfile.jsの作成 var gulp =
require('gulp'); gulp.task('hello', function() { console.log('Hello gulp!'); }); gulp.task('default', ['hello']);
30.
デモ
31.
実践その1
32.
作成プログラム概要 1)cssフォルダ内にある拡張子がCSSのファイルを全て結合 2)1で結合したファイルをall.cssという名前で保存 3)all.cssをminify(圧縮)する 4)3で作成したファイルをall.min.cssという名前で保存 5)4で作成したファイルを出力
33.
使用プラグイン gulp-concat gulp-minify-css
gulp-rename npm install --save-dev
34.
使用プラグインのインストール npm install –save
–dev gulp-concat npm install –save –dev gulp-minify-css npm install –save –dev gulp-rename npm install --save-dev
35.
デモ
36.
作成プログラムに処理追加 1)cssフォルダ内にある拡張子がCSSのファイルを全て結合 2)1で結合したファイルをall.cssという名前で保存 3)all.cssをminify(圧縮)する 4)3で作成したファイルをall.min.cssという名前で保存 5)4で作成したファイルを出力 →上記の処理をファイルの更新があった場合に自動的に実行させる
37.
デモ
38.
実践その2
39.
作成プログラムに処理追加 1)cssフォルダ内にある拡張子がCSSのファイルを全て結合 2)1で結合したファイルをall.cssという名前で保存 3)all.cssをminify(圧縮)する 4)3で作成したファイルをall.min.cssという名前で保存 5)4で作成したファイルを出力 →1~2と3~5を別のタスクとして記述する
40.
ここで問題
41.
Node.jsの問題 node.jsの処理は非同期で実行される
42.
Node.jsの問題 処理1 処理3 処理2 並行処理される =どれが最初に終わるか分からない
43.
問題の解決 run-sequenceというプラグインを使う
44.
問題の解決 npm install --save-dev
run-sequence 処理実行順を管理できるプラグインを使う ※gulp4.0では実行順序を指定できるAPIが提供される
45.
デモ
46.
様々なプラグイン http://gulpjs.com/plugins/ gulp pluginページ
47.
Sass,Compassなどのコンパイル HTMLからmarkdown,プレーンテキストに変換
CSS中に点在したメディアクエリーをまとめる CSSベンダープリフィックスの管理 CSSプロパティ並び順整理 コードの連結 コードの圧縮 コードの整形 CSSスプライト生成 画像圧縮 markdownをPDFに変換 Webページのスクリーンショット撮影 画像サイズ変換 コード構文チェック Lint ファイル書き出し 圧縮/解凍 FTPアップロード 文字コード変換 実体参照変換 JSON,YAML,XML,PLIST,CSV の相互変換 HTMLテーブルをCSVに変換 サイトマップ作成 sitemap.xml生成 通知センターに通知 これらの作業をまとめて自動化できる! gulpで自動化できること(一部)
48.
おまけ
49.
StyleDoccoについて Node.jsで作られてるスタイルガイドジェネレーター CSSにMarkDown(Qiitaで使ってる奴)で書いたらHTML出力される
gulpのプラグインで自動的に生成させたりできるらしい SassとかLessと組み合わせて使うといいかもね
50.
StyleDoccoについての感想 CSSファイルが肥大化しそう 納期に追われてる時にそんなん書く余裕なさそう
記述ルール決めないと意味不明になりそう モジュールを可視化できるのはいい すでにあるボタンなどを再作成することがなさそう
51.
ありがとうございました
Télécharger maintenant