おためし受講中

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

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

この授業で学べること

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

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

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    02:52  (00:10 ~ )
    アジェンダ
    00:54  (03:02 ~ )
    Gulpって一体なんだろう?
    00:26  (03:56 ~ )
    ウェブサイト制作には手間のかかる作業が多い
    01:58  (04:22 ~ )
    Gulpとは
    00:36  (06:20 ~ )
    作業を自動化するGulp
    01:47  (06:56 ~ )
    類似のタスクランナーとの比較
    02:45  (08:43 ~ )
    タスクランナーのトレンド推移
    02:54  (11:28 ~ )
    Gulpをインストールしよう
    00:19  (14:22 ~ )
    Node.jsのインストール
    07:21  (14:41 ~ )
    Gulpをグローバルにインストールする方法
    03:00  (22:02 ~ )
    プロジェクトの初期設定
    01:22  (25:02 ~ )
    プロジェクトにGulpをインストールする
    03:03  (26:24 ~ )
    必要なプラグインをインストールする
    00:50  (29:27 ~ )
    タスクランナーの指示ファイルを作成
    01:07  (30:17 ~ )
    タスクを作って実行しよう
    00:14  (31:24 ~ )
    Sassのコンパイル
    03:09  (31:38 ~ )
    Sassのコンパイルに必要なプラグインをインストールする
    01:03  (34:47 ~ )
    gulpfile.jsにタスクを記述する
    03:38  (35:50 ~ )
    コマンドラインでタスクを実行する
    02:30  (39:28 ~ )
    ファイルの変更を監視してみよう
    00:09  (41:58 ~ )
    watch機能とは
    00:58  (42:07 ~ )
    watchを使ったタスク作成
    05:02  (43:05 ~ )
    Q:watchの対象は、フォルダ指定したら配下にあるファイルはすべて監視されるという感じでしょうか?
    01:38  (48:07 ~ )
    まとめ
    01:09  (49:45 ~ )
    【後半】質疑応答
    Q:チームで使う場合にバージョンを合わせる必要があるとか、気をつけることはありますか?
    02:12  (51:18 ~ )
    Q:jQuery HTML cssのチェック(lint)はしてもらえるんですか?
    02:59  (53:30 ~ )
    Q:gulpはjavascriptの文法の基本がわかっていれば理解をより深められるのでしょうか?
    01:27  (56:29 ~ )
    Q:gulpのオススメの書籍を教えてほしいです。
    02:15  (57:56 ~ )
    Q:資料15ページのプロジェクトフォルダですが、これはgulpを使って制作したいフォルダのパスを設定して、資料16~20の流れを行うという解釈でよいでしょうか?
    00:55  (1:00:11 ~ )
    次回授業について
      (1:01:06 ~ )