Gulp

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

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

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

空き時間で稼げる副業
自分のスキルを活かして副収入を得よう!
ココナラ

先輩くん
先輩くん
土日の空き時間で始められる副業におすすめだよ!
後輩ちゃん
後輩ちゃん
エンジニアではない方でも受けられる仕事が沢山あるよ!
公式ホームページはこちら

最短3ヶ月でエンジニアになれる!?
転職成功率98%のプログラミングスクール
DMM WEB CAMP

先輩くん
先輩くん
オンライン完結で24時間どこでも学習することができるよ!
後輩ちゃん
後輩ちゃん
未経験から憧れのエンジニアになるぞ〜!!
簡単30秒で無料相談申し込み

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アクセスランキング にほんブログ村