chevron_left

Gulp入門

PREMIUM
第1回

ウェブ制作を劇的に効率化するGulpとは?

2016年10月26日 60min

スライド資料

会員登録して、全てのスライドを見よう

1 / 34

授業の概要

Gulp入門の第1回目は、Gulpの概要とインストール方法を紹介し、基本的なタスクが書けるようになるまでの手順を紹介します。

この授業で学べること

  • ・Gulpの特徴、メリット
  • ・Windows、macOSにおけるGulpのインストール方法
  • ・Gulpのタスク処理の基本
  • ・Gulpの便利な機能「watch」

サンプルファイルはこちらからからダウンロードできます。

こんな人にオススメ

基本的なHTML・CSSコーディングのできるウェブデザイナー・コーダー

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
自己紹介
02:52
play_arrow
アジェンダ
00:54
play_arrow
Gulpって一体なんだろう?
00:26
play_arrow
ウェブサイト制作には手間のかかる作業が多い
01:58
play_arrow
Gulpとは
00:36
play_arrow
作業を自動化するGulp
01:47
play_arrow
類似のタスクランナーとの比較
02:45
play_arrow
タスクランナーのトレンド推移
02:54
play_arrow
Gulpをインストールしよう
00:19
play_arrow
Node.jsのインストール
07:21
play_arrow
Gulpをグローバルにインストールする方法
03:00
play_arrow
プロジェクトの初期設定
01:22
play_arrow
プロジェクトにGulpをインストールする
03:03
play_arrow
必要なプラグインをインストールする
00:50
play_arrow
タスクランナーの指示ファイルを作成
01:07
play_arrow
タスクを作って実行しよう
00:14
play_arrow
Sassのコンパイル
03:09
play_arrow
Sassのコンパイルに必要なプラグインをインストールする
01:03
play_arrow
gulpfile.jsにタスクを記述する
03:38
play_arrow
コマンドラインでタスクを実行する
02:30
play_arrow
ファイルの変更を監視してみよう
00:09
play_arrow
watch機能とは
00:58
play_arrow
watchを使ったタスク作成
05:02
play_arrow
Q:watchの対象は、フォルダ指定したら配下にあるファイルはすべて監視されるという感じでしょうか?
01:38
play_arrow
まとめ
01:09
play_arrow
Q:チームで使う場合にバージョンを合わせる必要があるとか、気をつけることはありますか?
02:12
play_arrow
Q:jQuery HTML cssのチェック(lint)はしてもらえるんですか?
02:59
play_arrow
Q:gulpはjavascriptの文法の基本がわかっていれば理解をより深められるのでしょうか?
01:27
play_arrow
Q:gulpのオススメの書籍を教えてほしいです。
02:15
play_arrow
Q:資料15ページのプロジェクトフォルダですが、これはgulpを使って制作したいフォルダのパスを設定して、資料16~20の流れを行うという解釈でよいでしょうか?
00:55
play_arrow
次回授業について