【Gulp】インストール - ただ日々を記すもの

Gulpのインストールから簡単な使い方までを紹介

Gulpとは？

GulpはNode.jsをベースとしたタスク自動化ツールです。
cssやJavaScriptへのコンパイルをタスクとして登録することで、自動で行ってくれます。

※まずはNode.jsがインストールされていることを確認してください

gulpのインストール

npm install -g gulp-cli

を実行でインストールできます。（もしかしたら管理者権限でないとインストールできないかも...。そのときはsudoを文頭につけて実行してください。）

gulp -v

を実行し、Gulpのバージョンが表示されれば問題なくインストールされています。

プロジェクトフォルダにて、

npm init

を実行してください。これをすることで、package.jsonが生成されます。

次に、プロジェクトでもgulpを使えるように以下のコマンドを実行

npm install —save-dev gulp

インストールのコマンド

npm instsall —save-dev （プラグイン名）

例）

タスクを記述するgulpfile.jsファイルを作成します。

var gulp = require(“gulp”);

gulp.task(“default”, function() {
  gulp.watch(“css/style.scss”, function() {
   // 処理
  })
})

watchタスク内に記述されたタスクは、変更があると自動で検知しタスクを実行してくれる

実行するときは、

gulp

をすることで、記述されたタスクを実行してくれます。

watchを記述することで、監視状態になります。

監視状態を終了するためには、Ctrl + c で終了できます。

たぶんもっと実用的で、綺麗にインストールする方法はあると思うのですが、結構簡単にgulpを使うことができるんだなぁと感動したので学んだままの形で記載しておきます。

もし参考になれば幸いです。