コーディングを効率的にできるツールGulpの導入方法

お疲れ様です。kiokaです。

えー、最近node.jsを使ったgulpという作業効率を大幅にあげてくれるツールがあります。

少々誤報があるかもしれませんが、そのGulpの導入方法を記載できたらなと思います。

※この記事はmacという設定で記載していきます。

まぁ、Gulpで出来ることはSassの自動コンパイルとブラウザの自動更新などです。

私自身いま使っているのがこれぐらいなので、これ以上のオプションは紹介できないのでご了承ぐださいませ。

まずは、gulpをインストールするために必要なnode.jsをインストールします。

https://nodejs.org/en/download/

ここのリンクの「Mac OS X Installer (.pkg)」という箇所をクリックしていただいて、インストールまでmac上でおこなってください。

インストールできたらターミナルというものを立ち上げて下さい。

そしたらそこに、

sudo npm install -g gulp

と打ち込んでエンターを押して下さい。

そしたらパスワードを要求されるので、パスワードを打ち込んで下さい。

（パスワードはmacを起動させた時に要求されるパスワードになっています。）

そしたらこれでgulpのインストールは完了です。

これだけでgulpは使えるの？って聞かれるとうなずけません。

インストールしたら次は、作業するディレクトリ（フォルダ）にインストールしないといけません。

上記の画像、今回のProject_fileとします。作成場所はデスクトップとして仮定します。

そしてもし、ここでgulpを使いたいなと思ったら、ターミナルに戻ってもらって

cd desktop/project01

と打って、ターミナル内のディレクトリの移動します。

そして、次に

npm init

と打ってもらうと、一番下にname: (project01)とでてると思います。基本的にエンター連打でいいです。私もよくわからないので、エンター連打しています。

そして、下記の画像のようなjsonfileができると思います。

ここまで来たらいよいよgulpのインストールです。

ターミナルを開いて、

npm install --save-dev gulp

と打ち込んで下さい。

ターミナルのログが止まったかな？って思ったらたぶんインストール完了でございます。

今回はgulpの導入方法なので、ここまでにさせていただきます。

次はsassの自動コンパイル方法とブラウザの自動更新について記事をかかせていただきます。

ではでは(´・ω・`)