【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

Gulpのインストール方法について解説

こちらの記事では、Gulpのインストール方法について分かりやすく解説しています。

実際にGulpの処理を記述して、処理を実行させるサンプル付きなのでGulpを使ったことがない人は、ぜひこちらの記事を参考にしてください。

Node.jsの学習におすすめ書籍
Node.js超入門[第4版]
総合評価
( 5 )
メリット
  • 今月出版されたNode.js超入門 第3版の改訂版
  • 最新のNode.jsを学ぶことができる
楽天ブックス
¥3,300 (2024/05/21 14:45時点 | 楽天市場調べ)
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

Gulpインストール手順

STEP1 Node.jsのインストール

node.js公式ページ

まず始めにNode.jsのインストールをします。

こちらのNode.js公式ページにアクセスし、LTS(推奨版)と記載されているものをインストールします。

LTSとCurrentの違い
  • LTS(Long Time Support):長期間サポートされている
  • Current:Node.jsの開発者が新しく追加された機能を試す環境

node.jsをインストールしたら下記のコマンドを実行して正しくインストールができているか確認します。

npm -v

コマンドを実行してバージョン(例:6.13.4)が返ってきたら正しくインストールがされています。

続いて、yarnのインストールを行います。npmでもGulpを導入することは可能ですが、yarnはnpmよりも処理速度が速いためオススメです。

以下のコマンドを実行するとグローバル環境にyarnがインストールされます。

npm install -g yarn

STEP2 gulp-cliのインストール

node.jsのインストールとyarnのインストールが完了したら、以下のコマンドを実行してgulp-cliをグローバル環境にインストールします。

yarn global add gulp-cli

グローバル環境にインストールすることで、どのプロフェクトでもGulpを使うことができます。

STEP3 プロジェクト内の設定

Gulpのインストールが完了したら、続いてプロジェクト内の設定をします。

以下のコマンドを実行するとプロジェクトの設定ファイルを初期化することができます。

yarn init -y

上記コマンドを実行するとpackage.jsonファイルが新規で作成されます。

package.jsonとは?

package.jsonとは、node.jsの設定ファイルになります。モジュールが追加されたタイミングでこのpackage.jsonに追記されていきます。

STEP4 gulpのインストール

以下のコマンドを実行してgulpをローカル環境にインストールします。

yarn add gulp --dev

package.jsonファイル内のdevDependenciesにgulpが入っていればインストールが完了されています。

STEP5 gulpファイルの作成

gulpの処理を記述するためのファイルを用意する必要があり、ファイル名はgulpfile.jsでルートディレクトリに作成したファイルを置きます。

sample
  |- node_modules
  |- gulpfile.js  /* 新規追加 */
  |- package.json
  |- yarn.lock

STEP6 簡単な処理を記述して実行させる

最後に簡単な処理を記述して実際にGulp処理を実行させます。

gulpfile.jsファイルが置かれているディレクトリにsrcディレクトリを作成して、その中にindex.htmlファイルを作成します。続いて、srcディレクトリと同様にgulpfile.jsファイルが置かれているディレクトリにdistディレクトリを作成します。

sample
  |- node_modules
  |- gulpfile.js
  |- package.json
  |- yarn.lock
  |- dist  /* 新規追加 */
  |- src  /* 新規追加 */
      |- index.html  /* 新規追加 */

2つのディレクトリと1つのindex.htmlファイルを作成したら、以下のコードをgulpfile.jsに記述します。

const {src, dest} = require('gulp');

function copyFiles(){
   return src('./src/index.html')
   .pipe(dest('./dist'));
}

exports.copyFiles = copyFiles;

上記のコードは先ほど作成したsrcディレクトリ内にあるindex.htmlファイルをコピーして、distディレクトリに複製する処理になります。

  • src:操作対象を指定
  • dest:作業完了時のフォルダを指定

gulpfile.jsの記述が完了したら、以下のコマンドを実行させることでgulpfile.jsに記述されているcopyFilesの処理が走りdistディレクトリ内に、複製されたindex.htmlファイルがコピーされます。

gulp copyFiles

まとめ

今回はGulpのインストール方法について解説しました。重要なポイントを忘れないようおさらいを兼ねて下記にまとめました。

ポイント
  • gulpfile.jsにGulpの処理を記述する
  • Gulpは「gulp タスク名」で処理が実行される

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次