第3回「Gulpを導入してみよう!その1」

  • このエントリーをはてなブックマークに追加

はじめに

こんにちは!
テンダ仙台支店webデザイナーのYHです。
今回はGulpのインストールと自動化させるための設定ファイルの作成を見ていきましょう。
実際に使用するまでのお話です。

なお、本記事ではWindows環境での利用を想定しています。

Node.jsのインストール

GulpはNode.jsというプラットフォーム上で動作するため、まずはNode.jsをインストールします。
https://nodejs.org/en/
インストーラーをダウンロードして実行、インストールが終わったらコマンドプロンプトを起動します。その後、以下を入力して、バージョンが表示されれば完了です。

npmの確認

Gulpはプラグインによって機能が追加されます。
プラグインのインストールはnpmを使用します。
npmとは「node package manager」の略称で、プラグインの管理を行うものです。
npmはNode.jsに含まれているので、すぐにインストールを確認できます。
コマンドプロンプトでバージョンを表示させてみましょう。

package.jsonの設定

npmで管理を行っていくためはpackage.jsonというファイルの作成が必要です。
今回はappというディレクトリを作って、その中に作成します。
コマンドプロンプト上でもディレクトリを移動しておきます。

移動後、npm initと入力します。

一問一答形式で質問が表示されますが、必要な箇所のみの回答でOKです。

Gulpインストール

いよいよGulpをインストールします。プラグインだけでなくGulp本体もnpmを使用して管理します。
ローカルとグローバル、両方にインストールが必要ですので、以下を入力します。

グローバル

ローカル

完了するとpackege.jsonには以下が追記されています。

※WARNINGが出る場合もありますが、Gulpのパッケージ内の問題によるもので、
今後のバージョンアップで修正される可能性があります。
インストールには影響がないので気にしなくてもよさそうです。

Gulpのインストールはこれで完了です。
次回はプラグインのインストールと自動化の設定を行いましょう。

他の記事

第1回「web制作が便利に!Gulpを知った気になれる記事」

第2回「Gulpを使ってできること」

第3回「Gulpを導入してみよう!その1」

第4回「Gulpを導入してみよう!その2」

第5回「Gulpを導入してみよう!その3」

第6回「Gulp活用 実際のweb制作では」

  • このエントリーをはてなブックマークに追加
株式会社テンダ
第3回「Gulpを導入してみよう!その1」
テンダ仙台支店
サイトトップ
支店情報
オフィス情報
取り組み
ヴィジョン
事業紹介
開発分野
開発言語
パッケージ
実績紹介
すべて
開発実績
デザイン実績
その他
採用情報
ブログ
お問い合わせ
Copyright© TENDA Co.,Ltd. All Rights Reserved.