LIVE
ON AIR

20:00 - 21:00

C#実践 -WPFアプリケーションとXAML入門①- 生放送中

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

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

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

詳細を開く
ウェブ制作を劇的に効率化するGulpとは?
2016年10月26日公開
01:00:00
  • 自己紹介
  • 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
こんな人にオススメ
フロントエンドエンジニア(中級)

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

スライド資料
授業で使用するファイル
担当の先生
受講生代表
  • 田原 彩香

    田原 彩香

    スクー放送部

受けたいランキング
新着の生放送授業
関連授業