おためし受講中

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

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

この授業で学べること​

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

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    00:49  (00:10 ~ )
    アジェンダ
    00:55  (00:59 ~ )
    Browsersyncで爆速ブラウザ確認
    00:07  (01:54 ~ )
    質問:ブラウザの実機確認どうしていますか?
    02:55  (02:01 ~ )
    Browsersyncを使ったブラウザチェック
    00:49  (04:56 ~ )
    実践:Browsersyncを使ったブラウザチェック
    09:34  (05:45 ~ )
    回答:ブラウザの実機確認どうしていますか?
    01:10  (15:19 ~ )
    ベンダープレフィックスの自動設定
    00:08  (16:29 ~ )
    質問:主要ブラウザ最新版で
border-radiusプロパティーに必要な
ベンダープレフィックスを全て選んでください
    02:16  (16:37 ~ )
    質問:Edge・Firefox最新版、
iOS 8.0以上、Android 4.0以上のブラウザで
linear-gradientプロパティーに必要な
ベンダープレフィックスを全て選んでください
    02:16  (18:53 ~ )
    Autoprefixer
    01:34  (21:09 ~ )
    実践:Autoprefixer
    09:02  (22:43 ~ )
    Sassのコンパイル
    02:11  (31:45 ~ )
    実践:Sassのコンパイル
    06:05  (33:56 ~ )
    リリースファイルの作成
    00:32  (40:01 ~ )
    質問:リリースファイル作っていますか?
    02:21  (40:33 ~ )
    ファイルのコピー
    01:44  (42:54 ~ )
    ファイルの削除
    02:36  (44:38 ~ )
    ファイルの移動
    04:39  (47:14 ~ )
    タスクの命名・実行
    01:07  (51:53 ~ )
    まとめ
    01:32  (53:00 ~ )
    【後半】質疑応答
    Q:ガルプファイルは一個作ってたら、他のファイルでも使い回しができるのでしょうか?
    01:36  (54:51 ~ )
    Q:オートプレフィクサーはブラウザ指定しない場合、ベンダープレフィックスは全てつくと言う認識でいいでしょうか?
    02:24  (56:27 ~ )
    次回授業のお知らせ
      (58:51 ~ )