Gulp入門

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

第1回:2016年10月26日公開

60min

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

おためし受講する(5分)

コース概要

この授業ではタスクランナー「Gulp」について学びます。近年のウェブサイト制作技術は多岐に渡っており、画像の圧縮、Sass・TypeScriptの使用、リアルタイムプレビューなどが必要です。これらの煩雑な処理はタスクランナーであるGulpを使って自動化できます。

この授業で、Gulpの基本的な使い方から、WebPackとの連携などの応用的な内容まで踏み込み、現場で使える知識の習得を目指しましょう。

こんな人にオススメ

フロントエンドエンジニア(中級)
基本的なHTML・CSSコーディングのできるウェブデザイナー・コーダー

担当の先生

パーソナリティ

  • 田原 彩香

    田原 彩香

    スクー放送部

参加したい受講生 : 1063

タグ

サンプルファイル

授業で使用するファイル
月額980円で、4,600本以上の授業が見放題

授業リスト

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

2016年10月26日公開

60min.

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

この授業で学べること

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

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

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

スライド資料

Gulpでさまざまなタスクを行ってみよう

2016年11月9日公開

60min.

Gulp入門の第2回目は、ウェブ制作の現場でよく使うタスクをいくつか作成しながら、Gulpを使った実践的なタスク処理を学びます。

この授業で学べること​

  • ・タスクの同期処理・非同期処理について
    • ・CSS・JavaScriptファイルの結合
    • ・JavaScriptファイルの難読化
    • ・CSSスプライトの作成
    • ・Sassのコンパイル
    • ・TypeScriptのコンパイル
    • ・Lintの設定
    • ・BrowserSyncを使ってブラウザのリアルタイムプレビュー

スライド資料

よりGulpを使いこなすために知っておくべきこと

2016年11月16日公開

60min.

Gulp入門の第3回目は、Gulp講座の発展的内容として、大規模なウェブサイトやSPAの開発を効率的に行うためのTipsを紹介します。

この授業で学べること​

  • ・より大規模なタスク処理のためのTips
  • ・Gulpのおすすめプラグイン
  • ・npm scripts・WebPackとの連携

スライド資料

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×