Gulp入門

  • このエントリーをはてなブックマークに追加
ウェブ制作を劇的に効率化するGulpとは?
第1回:2016年10月26日公開 01:00:00

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

受講する

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

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

授業一覧
ウェブ制作を劇的に効率化するGulpとは?
2016年10月26日公開
01:00:00

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日公開
01:00:00

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

この授業で学べること​

  • ・タスクの同期処理・非同期処理について
    • ・CSS・JavaScriptファイルの結合
    • ・JavaScriptファイルの難読化
    • ・CSSスプライトの作成
    • ・Sassのコンパイル
    • ・TypeScriptのコンパイル
    • ・Lintの設定
    • ・BrowserSyncを使ってブラウザのリアルタイムプレビュー
よりGulpを使いこなすために知っておくべきこと
2016年11月16日公開
01:00:00

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

この授業で学べること​

  • ・より大規模なタスク処理のためのTips
  • ・Gulpのおすすめプラグイン
  • ・npm scripts・WebPackとの連携
こんな人にオススメ
フロントエンドエンジニア(中級)

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

タグ
授業で使用するファイル
担当の先生
受講生代表
  • 田原 彩香

    田原 彩香

    スクー放送部

この授業を受けたい(1000人)
その他 921人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

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