Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
Submit search
EN
TK
Uploaded by
Tomoki Kobayashi
1,158 views
Hcmtg 1407
Internet
◦
Read more
0
Save
Share
Embed
Embed presentation
Download
Download to read offline
1
/ 81
2
/ 81
3
/ 81
4
/ 81
5
/ 81
6
/ 81
7
/ 81
8
/ 81
9
/ 81
10
/ 81
11
/ 81
12
/ 81
13
/ 81
14
/ 81
15
/ 81
16
/ 81
17
/ 81
18
/ 81
19
/ 81
20
/ 81
21
/ 81
22
/ 81
23
/ 81
24
/ 81
25
/ 81
26
/ 81
27
/ 81
28
/ 81
29
/ 81
30
/ 81
31
/ 81
32
/ 81
33
/ 81
34
/ 81
35
/ 81
36
/ 81
37
/ 81
38
/ 81
39
/ 81
40
/ 81
41
/ 81
42
/ 81
43
/ 81
44
/ 81
45
/ 81
46
/ 81
47
/ 81
48
/ 81
49
/ 81
50
/ 81
51
/ 81
52
/ 81
53
/ 81
54
/ 81
55
/ 81
56
/ 81
57
/ 81
58
/ 81
59
/ 81
60
/ 81
61
/ 81
62
/ 81
63
/ 81
64
/ 81
65
/ 81
66
/ 81
67
/ 81
68
/ 81
69
/ 81
70
/ 81
71
/ 81
72
/ 81
73
/ 81
74
/ 81
75
/ 81
76
/ 81
77
/ 81
78
/ 81
79
/ 81
80
/ 81
81
/ 81
More Related Content
PPTX
実プロジェクトの経験から学ぶazureサービス適用パターン
by
Kuniteru Asami
PDF
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
by
崇之 清水
PDF
Bicep 入門 MySQL編
by
Takekazu Omi
PPTX
Azure DevOpsで技術同人誌作成
by
裕之 木下
PDF
すぐにでも使える Windows Virtual Desktop
by
Tsukasa Kato
PDF
Next30 wg 2
by
harunobu
PDF
「何もしないのにCIが失敗した」を防ぐ
by
Kazushi Kamegawa
PDF
OSS/linux on Azureの活用方法と勘所
by
Kuniteru Asami
実プロジェクトの経験から学ぶazureサービス適用パターン
by
Kuniteru Asami
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
by
崇之 清水
Bicep 入門 MySQL編
by
Takekazu Omi
Azure DevOpsで技術同人誌作成
by
裕之 木下
すぐにでも使える Windows Virtual Desktop
by
Tsukasa Kato
Next30 wg 2
by
harunobu
「何もしないのにCIが失敗した」を防ぐ
by
Kazushi Kamegawa
OSS/linux on Azureの活用方法と勘所
by
Kuniteru Asami
What's hot
PDF
CDP 勉強会 - Multiple Datacenter Deployment ガイダンス
by
Kuniteru Asami
PPTX
Grunt入門
by
Tsuyoshi Maeda
PDF
Introduction of Azure Docker Integration
by
Takekazu Omi
PDF
Nested Hyper-v on Azure
by
Masahiko Ebisuda
PDF
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
by
慎二 山田
PDF
Azure Virtual Machines設計の勘所 | Microsoft Tech Summit 2017
by
Kuniteru Asami
PDF
Babelで先取り次世代javascript
by
Tsuyoshi Maeda
PPTX
ハイブリッドクラウド研究会趣旨説明とこれまでの取り組み(2019/01/24)
by
Masahiko Ebisuda
PPTX
Node.jsに縁のない職場でnode.jsを使い始める戦術
by
Isamu Suzuki
PPTX
Visual studioonlineとwebサイトで始めるci/cdの第一歩
by
Kazunori Hamamoto
PPTX
Azure Functionsを業務利用する時の勘所
by
裕之 木下
PDF
GCP vs 他社クラウド
by
Hasegawa Yusuke
PPTX
AWSではじめるお手軽オンラインゲーム開発
by
AimingStudy
PPTX
AWSでシステム構築工数を1/10にしつつ、高品質化も実現した枠組みのご紹介
by
株式会社スカイアーチネットワークス
PDF
Aks on azure stack hci with azure arc
by
Masahiko Ebisuda
PDF
OITEC 3/16
by
Keiji Kamebuchi
PDF
2021/6/29 Azure Hybrid and Multicloud Digital Event の内容を日本語でお届け!
by
Masahiko Ebisuda
PPTX
Tuning maniax 2014 2nd stage linux編
by
ThinkIT_impress
PDF
インフラ管理者に送る あらためての IoT Edge / IoT Hub
by
Masahiko Ebisuda
PDF
Vsug day 2010 summer windows azure でやってみよう
by
mizusawa
CDP 勉強会 - Multiple Datacenter Deployment ガイダンス
by
Kuniteru Asami
Grunt入門
by
Tsuyoshi Maeda
Introduction of Azure Docker Integration
by
Takekazu Omi
Nested Hyper-v on Azure
by
Masahiko Ebisuda
Nuxt.js入門 2018/02/02 Vue.js入門勉強会@渋谷 発表資料
by
慎二 山田
Azure Virtual Machines設計の勘所 | Microsoft Tech Summit 2017
by
Kuniteru Asami
Babelで先取り次世代javascript
by
Tsuyoshi Maeda
ハイブリッドクラウド研究会趣旨説明とこれまでの取り組み(2019/01/24)
by
Masahiko Ebisuda
Node.jsに縁のない職場でnode.jsを使い始める戦術
by
Isamu Suzuki
Visual studioonlineとwebサイトで始めるci/cdの第一歩
by
Kazunori Hamamoto
Azure Functionsを業務利用する時の勘所
by
裕之 木下
GCP vs 他社クラウド
by
Hasegawa Yusuke
AWSではじめるお手軽オンラインゲーム開発
by
AimingStudy
AWSでシステム構築工数を1/10にしつつ、高品質化も実現した枠組みのご紹介
by
株式会社スカイアーチネットワークス
Aks on azure stack hci with azure arc
by
Masahiko Ebisuda
OITEC 3/16
by
Keiji Kamebuchi
2021/6/29 Azure Hybrid and Multicloud Digital Event の内容を日本語でお届け!
by
Masahiko Ebisuda
Tuning maniax 2014 2nd stage linux編
by
ThinkIT_impress
インフラ管理者に送る あらためての IoT Edge / IoT Hub
by
Masahiko Ebisuda
Vsug day 2010 summer windows azure でやってみよう
by
mizusawa
Similar to Hcmtg 1407
PDF
Gruntを導入しよう!の話
by
Koji Nakamura
PDF
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
by
Masayuki Ishikawa
PDF
自動化ツール「Grunt.js」について
by
Seiko Kuchida
PDF
jsCafe v13 Grunt
by
Shinya Sugo
PDF
Gruntでフロントの生産性up
by
Kazuyoshi Goto
PDF
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
by
Toshimichi Suekane
PDF
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
by
Masayuki Ishikawa
PDF
Sass/Compassの導入と環境構築
by
Sou Lab
PDF
Grunt.jsを使った Expressの開発環境構築
by
kamiyam .
PPTX
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
by
近藤 繁延
PDF
Webサイト・フロントエンドの高速化とgrunt.jsについて
by
Tomo Fujita
PDF
Sass/Compass よくあるトラブルと 解決方法・回避方法
by
Maboroshi.inc
ODP
今流行りのウェブアプリ開発環境Yeoman
by
tomo_masakura
PDF
Yeoman RIAビルドツール超入門
by
Masakazu Muraoka
Gruntを導入しよう!の話
by
Koji Nakamura
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
by
Masayuki Ishikawa
自動化ツール「Grunt.js」について
by
Seiko Kuchida
jsCafe v13 Grunt
by
Shinya Sugo
Gruntでフロントの生産性up
by
Kazuyoshi Goto
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 環境準備編
by
Toshimichi Suekane
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
by
Masayuki Ishikawa
Sass/Compassの導入と環境構築
by
Sou Lab
Grunt.jsを使った Expressの開発環境構築
by
kamiyam .
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
by
近藤 繁延
Webサイト・フロントエンドの高速化とgrunt.jsについて
by
Tomo Fujita
Sass/Compass よくあるトラブルと 解決方法・回避方法
by
Maboroshi.inc
今流行りのウェブアプリ開発環境Yeoman
by
tomo_masakura
Yeoman RIAビルドツール超入門
by
Masakazu Muraoka
Hcmtg 1407
1.
Gruntを使用してWEB制作 を便利にしよう (導入/基礎編)
2.
01_Web制作を便利にする Grunt
3.
そもそもGruntってなに?
4.
• Web制作で面倒な作業を自動化するツール
5.
Gruntでできること
6.
SCSSファイルのビルド JavaScriptファイルのバリデーション JavaScriptファイルの軽量化(圧縮、minify) CoffeeScriptファイルのコンパイル Lessファイルのコンパイル CSSファイルの圧縮 CSSファイルのバリデーションGitとの連携 画像の最適化 CSSスプライトの作成
7.
・・・ありすぎてわからないし 難しそう(́・ω・`;)
8.
でも
9.
実は単純な作業であれば そんなに難しくはない。
10.
02_Gruntのインストール
11.
Gruntを使うには下準備が必要です。 • sass/compassを使うのであればRubyのインストール • sass/compassのインストール •
node.jsのインストール • Grunt本体のインストール 以上4つを行う必要があります。
12.
Rubyインストール方法
13.
1.現行の最新インストーラーをダウンロードしインストール http://rubyinstaller.org/downloads/
14.
2.Ruby実行ファイルへの環境変数PATHを設定する。にチェックそのままインストール 個別に設定しなければいけない場合もあるので詳しくはgoogleで検索!
15.
コマンドプロンプトを開き【ruby -v】と打つと現在のrubyのVersionがわかる。何も 出ない場合はきちんとインストールされていない。
16.
sass・compassの インストール
17.
Rubyインストールすると標準的についてくるパッケージ管理ツールRubyGemsにて sass・compassのインストール。コマンドプロンプトを使用し以下を入力していく。 とりあえずはRubyGems自体をアップデート
18.
アップデートされたらsass、compassのインストール コマンドプロンプトに以下入力 gem install sass gem
install compass sass、compassのインストールを行う。
19.
きちんとインストールできているかを確認 きちんと上記のように表示されていたら 問題なくインストールされている。
20.
node.jsのインストール
21.
node.jsのインストール http://nodejs.org/ ↑上記サイトからinstallボタンを押すとインストーラーが ダウンロードされるのでインストール
22.
ローカルに保存して実行すると インストール完了。
23.
ただちょっと待って下 さい。
24.
node.jsはバージョンアップが早いためバージョン管理ツールなどの 導入も検討をしたほうがよいかも。(nodistなど)
25.
Gruntのインストール
26.
■npm(Node Package Manager)のインストール コマンドプロンプトから ! >
npm install -g grunt-cli ! 上記コマンドを入力するとnpm(Node Package Manager)にてGrunt のCLIをインストール出来る。 (オプションとして -gを付けておくと、どこからでも実行可能になる。)
27.
■パッケージ設定ファイルの制作 任意のディレクトリを作成。 今回はgrunt_sampleというディレクトリの作成 ! (僕の場合は今回はDドライブ直下に作成)
28.
コマンドプロンプトから、cdコマンドを使って 作成したディレクトリに移動。
29.
【現在いるディレクトリ】> cd 【移動したいディレクトリ】 ! 一階層上に戻る場合は【cd
../】 ※cd 【tabキー】 を押せば候補が出る。 コマンドプロンプトの見かた
30.
任意ディレクトリに移動したら、パッケージのインストール。 コマンドプロンプトで下記コマンドを打ち込む > npm init
31.
package.jsonの制作を行うコマンド。パッケージの設定が出来る。 色々設定出来ますが、とりあえず最初はエンター10回位押して そのまま作ってOK。
32.
いよいよGruntのインストールです。1行です。 ! npm install grunt
--save-dev ! 簡単w
33.
--save-devをつけると、package.jsonに インストールした情報が記述が追加される。 ! npm install grunt
は、gruntをインストールしろ、という指示です。
34.
長いログが流れ、終了するとgrunt_sampleディレクトリは 次のようになるはず。 grunt_sample これでGruntのインストールは完了です!
35.
03_Gruntの基本的な使い方
36.
プラグインのインストール 方法
37.
Gruntをインストールしたけど、このままでは使えません。 必要なプラグインを導入していきましょう。
38.
■プラグインのインストール 上記を記載することによりプラグインをインストールし、package.json に追記させる。 このようにすることでGruntで使用したいプラグインをどんどん追加し ていく。 npm install gruntを行ったディレクトリ上で npm
install 【プラグイン名】 --save-dev
39.
--- Memo --- package.jsonを使用することにより、package.jsonをコピペするだけ でその他のディレクトリでも簡単に同じパッケージを共有する事が出来る。 ! > npm install ! →既存のpackage.json
から使用するプラグインのインストールを行う
40.
タスクの設定
41.
Gruntはプラグインをインストールしただけでは使用できません。 Gruntfile.jsというファイルを用意してタスクを書き込んでいきましょう
42.
タスクの書き方は相対パスで基本的に記載していきます。 次のページから簡単なタスクの登録方法 Gruntfile.jsと名前を付けて保存。
43.
04_簡単なプラグインの説明
44.
ここからはCaptchaわけで説明 サンプルをGitHubにアップしているので 興味のある方は落としてみてください。 ! ! ※サンプルはすでにpackage.jsonを含めているので、 コマンドプロンプトで保存したディレクトリに行き、 ! npm install ! を実行すればOK
45.
Captcha01【copy】
46.
Captcha01【copy】 概要(どういう事ができるのか?) あるディレクトリにあるファイル(またはフォルダ)をそのまま別の場所 にコピーを作成することが出来る。 コピー
47.
Captcha01【copy】 使い方 grunt-contrib-copyというプラグインを使います。 grunt-contrib-copyのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install
grunt-contrib-copy --save-dev
48.
Captcha01【copy】 Gruntfileの説明・書き方 プラグインのGitHubページに詳しい使い方が載ってます。
49.
実行!
50.
Captcha02【clean】
51.
Captcha02【clean】 概要(どういう事ができるのか?) ディレクトリ・ファイルの削除ができる。 _dev img 画像1 画像2 _dev img
52.
Captcha02【clean】 使い方 grunt-contrib-cleanというプラグインを使います。 grunt-contrib-cleanのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install
grunt-contrib-clean --save-dev
53.
Captcha02【clean】 Gruntfileの説明・書き方 プラグインのGitHubページに詳しい使い方が載ってます。
54.
実行!
55.
Captcha03【cssmin】
56.
Captcha03【cssmin】 概要(どういう事ができるのか?) 複数のcssの結合・圧縮などができる
57.
Captcha03【cssmin】 使い方 grunt-contrib-cssminというプラグインを使います。 grunt-contrib-cssminのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install
grunt-contrib-cssmin --save-dev
58.
Captcha03【cssmin】 Gruntfileの説明・書き方 プラグインのGitHubページに詳しい使い方が載ってます。
59.
実行!
60.
Captcha04【csscomb】
61.
Captcha04【csscomb】 概要(どういう事ができるのか?) CSSプロパティのソート・並び替え 修正前 修正後
62.
使い方 grunt-csscombというプラグインを使います。 grunt-csscombのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install
grunt-csscomb --save-dev Captcha04【csscomb】
63.
Gruntfileの説明・書き方 sort.jsonにてソート順を読み込んでいる。 Captcha04【csscomb】
64.
sort.json Captcha04【csscomb】
65.
実行!
66.
Captcha05【compass】
67.
Captcha05【compass】 概要(どういう事ができるのか?) compassに対応し、Sassのコンパイルができる。
68.
使い方 grunt-contrib-compassとというプラグインを使います。 grunt-contrib-compassとのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install
grunt-contrib-compass --save-dev Captcha05【compass】
69.
Gruntfileの説明・書き方 基本的な設定は、compassで生成される config.rbファイル内での設定をします。 Gruntfileではオプションでconfig.rbのパスを設定すればOK Captcha05【compass】
70.
config.rb config.rbはsassが入っているディレクトリと cssに書き出しを行いたいディレクトリを指定すれば最低限使える。 Captcha05【compass】
71.
実行!
72.
Captcha06 【SampleTask】応用編
73.
ここまでは、単発での作業を行なってきました。
74.
でも、普通であれば単発での作業はあまり無く・・・。 同時に複数の作業を行わなければなりません。
75.
そこで 【grunt-contrib-watch】
76.
【grunt-contrib-watch】とは 指定したファイルを監視し、 更新があった場合は指定したタスク を実行する。
77.
使い方 grunt-contrib-watchとというプラグインを使います。 grunt-contrib-watchとのインストール方法 ※【02_Gruntのインストール】 が終わっている状態で。 > npm install
grunt-contrib-watch --save-dev grunt-contrib-watch
78.
Gruntfileの説明・書き方 例として。compassとwatchを使ったGruntfileの書き方。 Gruntfileの書き方はいろいろあるので自分の設定しやすいものに変えてOKです。 grunt-contrib-watch
79.
grunt-contrib-watchの実行 grunt-contrib-watch grunt-contrib-watchを実行すると、監視モードに入ります。 上のような画面が出ている時に、対象ファイルが更新されると指定した タスクを実行します。 ! ! 監視モードを終わりたい場合はctrl + Cキーを押し バッチ
ジョブを終了しますか(Y/N)と出るので Yキーを入力し Enter。
80.
Captcha6に 今までのすべてのタスクを使っ たサンプルファイルあります
81.
https://github.com/syaorinnmao/HCMTG_1407
Download