Web Marketing Blog

株式会社プレスマンのWebマーケティング部によるスタッフブログです。

コーディング

Gulp(ガルプ)導入方法 – インストールからプラグインの設定まで(Mac使用)

2018年7月13日

まずは、Node.jsとGulpをインストールします。
Node.jsはサーバー側で動くjsのようなものらしいです。

Node.jsのインストール

Node.js(最新版をDLした方が便利です)
https://nodejs.org/ja/

インストールされてるか確認
下記コマンドをターミナルに入力します。

node -v

Node.jsのバージョンが返ってきたら、インストールが無事完了です。

※Node.jsの最新版(npm v5.2以上)だと、npxというコマンドが使えます。npxコマンドを使うと、Gulpを少ない手順で使えるようになります。

続いてGulpをインストール

ターミナルで、Gulpをダウンロードするフォルダまで移動します。

移動コマンドは以下のような感じ

cd /Users/★★★/myproject 

次のコマンドを実行すると、
プロジェクトの設定情報が記述されたpackage.jsonファイルが生成されます。

npm init -y

続いて、下記のコマンドで、
Gulp本体をプロジェクトにインストールします。

npm install -D gulp

以上の手順で、Gulpの導入は完了です。

ターミナルでいちいち場所移動するのが面倒な場合

Macだと、デフォルトの機能をちょっといじるだけで、
finderからターミナルを開けます。

環境設定 > キーボード > ショートカット > サービス
フォルダに新規ターミナルタブにチェック

finder > ターミナルで移動したいフォルダに右クリック
サービス > フォルダに新規ターミナル

-コーディング

Copyright© Web Marketing Blog , 2019 All Rights Reserved.