chevron_left

Gulp入門
PREMIUM
第2回

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

2016年11月9日 60min
Gulpでさまざまなタスクを行ってみよう play_arrow おためし受講

スライド資料

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

1 / 32

授業の概要

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

この授業で学べること​

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

こんな人にオススメ

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

担当の先生／パーソナリティ

授業で使用する教材

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

チャプター

play_arrow
自己紹介
00:49
play_arrow
アジェンダ
00:55
play_arrow
Browsersyncで爆速ブラウザ確認
00:07
play_arrow
質問：ブラウザの実機確認どうしていますか？
02:55
play_arrow
Browsersyncを使ったブラウザチェック
00:49
play_arrow
実践：Browsersyncを使ったブラウザチェック
09:34
play_arrow
回答：ブラウザの実機確認どうしていますか？
01:10
play_arrow
ベンダープレフィックスの自動設定
00:08
play_arrow
質問：主要ブラウザ最新版で
border-radiusプロパティーに必要な
ベンダープレフィックスを全て選んでください
02:16
play_arrow
質問：Edge・Firefox最新版、
iOS 8.0以上、Android 4.0以上のブラウザで
linear-gradientプロパティーに必要な
ベンダープレフィックスを全て選んでください
02:16
play_arrow
Autoprefixer
01:34
play_arrow
実践：Autoprefixer
09:02
play_arrow
Sassのコンパイル
02:11
play_arrow
実践：Sassのコンパイル
06:05
play_arrow
リリースファイルの作成
00:32
play_arrow
質問：リリースファイル作っていますか？
02:21
play_arrow
ファイルのコピー
01:44
play_arrow
ファイルの削除
02:36
play_arrow
ファイルの移動
04:39
play_arrow
タスクの命名・実行
01:07
play_arrow
まとめ
01:32
play_arrow
Q：ガルプファイルは一個作ってたら、他のファイルでも使い回しができるのでしょうか？
01:36
play_arrow
Q：オートプレフィクサーはブラウザ指定しない場合、ベンダープレフィックスは全てつくと言う認識でいいでしょうか？
02:24
play_arrow
次回授業のお知らせ