プログラミング

【タスクランナー】gulpの環境構築手順をまとめてみた【もう迷わない】

未経験からWebエンジニアに転職しようと思うと、独学である程度のスキルを身につけておく必要があります。

転職活動をしていくにあたって、必要なスキルは何か?色々と調べていました。

 

その中の一つが、「gulp」です。

未経験から転職されただりあさん(@engineer_dahlia)の記事にも書かれていました。コーダーに転職して入社後に困らない為に身につけておくべきスキルセット4つ

 

gulpは簡単に言うと「タスクを自動化してくれるツール」です。

前職でも、Excelのマクロ機能を使い倒していた人なので、「自動化」という言葉、個人的には興奮するタイプ。すぐさま飛びつきましたw

 

今回は、gulpの環境構築方法についての忘備録です。

もしも、gulpをまだ入れてない、難しそう。って人はぜひ導入してみてください。

コマンドラインの黒い画面が苦手という方も、そんなに難しくはないので大丈夫です。

 

 

gulpの環境構築方法

 

→gulpの環境構築手順

  • Homebrewのインストール
  • Gitのインストール
  • Node.jsの環境構築
  • npmのパッケージ管理
  • packege.jsonの作成
  • gulpのインストール

 

ざっくり書くとこんな感じで解説していきます。

 

「黒い画面が苦手」という人は、Progateのコマンドラインを1周して慣れておきましょう。

 

Homebrewのインストール

Homebrew(ホームブリュー)とは、MacOSで動くパッケージ管理システムのことで、コマンドを打つだけでツールをインストールすることができます。

macでツールを導入するにはスタンダードみたいですね。

インストールは簡単で、
Homebrewの公式ドキュメントにあるコマンドを実行するだけ。

 

$ /usr/bin/ruby -e \
"$(curl -fsSL https://raw.githubusercontent.com_Homebrew/install/master/install)"

 

意味は、
「HomebrewのGitHubにあるHomebrewのインストールプログラムを取得し、rubyで実行」

 

Gitのインストール

Node.jsの環境構築にGitを使用します。

→使用するツールがGitHub上に公開されているから。

 

Gitがインストールされているかの確認

$ git

 

インストールされていない場合

bash: git: command noe found

 

Gitをインストールするコマンド

$ brew install git

 

再度gitがインストールされているかを確認し、次のような画面が表示されれば、Gitが無事インストールされています。

 

Node.jsの環境構築

Node.jsとは、javascriptで作られたサーバーサイド環境で、javascriptをサーバー上で動作させるのに必要な環境です。

このNode.jsは日々開発が進んでいて、バージョンアップが繰り返されているためバージョン管理をする必要があります。

バージョンアップしたタイミングで、これまでとは違う動きをしたり、ツールが動かなくなったりと大きな影響ある可能性も。。

 

そのため、Aの案件ではこのバージョン、Bの案件ではこのバージョンのように、異なるバージョンを運用する必要が出てきます。

 

「案件ごとにバージョンを管理」するにはツールを使用します。

それが、anyenvnodenvです。

 

anyenvのインストール

「anyenv」言語のバージョン管理をするプログラムで、node.jsのバージョン管理をするには、nodenvをanyenvからインストールします。

 

anyenvの種類

  • rbenv(ruby)
  • pyenv(python)
  • nodenv(node.js)
  • goenv(go)
  • jenv(java)

git cloneコマンドでファイルをダウンロードしします。格納先は、ホームディレクトリ以下に隠しファイルとして保存。

$git clone https://github.com/riywo/anyenv ~/. anyenv

 

PATHを通すためにechoコマンドを記述

$echo 'export PATH="$HOME/.anyenv/bin:PATH"' >> ~/. bash_profile

 

$echo 'eval "$(anyenv init -)"' >> ~/.bash_profile

 

コマンドラインを再起動します。

$exec $SHELL -l

 

再起動した時に、.bash_profileファイルへ記述した2つの処理が実行される。
anyenvコマンドを実行する

 

$ anyenv

 

以下のようなコマンドが表示されれば、anyenvが無事インストールされています。

 

nodenv

Node.jsをバージョン管理するには、「nodenv」というプログラムをインストールします。

nodenvは、バージョンごとにディレクトリを分けてnode.jsのプログラムを保存しています。
バージョンの切り替えは、このディレクトリを切り替えることで行われる仕組みになっているんですね。

 

nodenvのインストール

$anyenv install nodenv

 

コマンドを記述して、再起動をかけます。

$exec $SHELL -l

 

nodenvを起動してみて、

$ nodenv

 

以下のようなコマンドが表示されれば、nodenvが無事インストールされています。

 

 

Node.jsのインストール

nodenvをインストールできたので、バージョン管理をしていくためにnodenvでNode.jsをインストールしていきます。

 

$nodenv --list

 

このコマンドを記述すると、インストール可能なバージョンリストが表示されます。

特に指定がない場合は、公式サイトで表示されている推奨バージョンをインストールするといいみたいです。

 

$ nodenv install 8.11.1

 

<グローバルとローカル>

グローバルはPC全体
ローカルはディレクトリ

Node.jsのバージョンを設定する時に、グローバルかローカルかを選択する必要があります。

グローバルに10.0.0が指定されていても、
ローカルに8.11.1が指定されている場合、8.11.1が優先されます。

 

$ nodenv global 8.11.1

 

 

npmのパッケージ管理

「npm」は、javascriptのパッケージマネージャーで、gulpやjQueryなどjavascriptのモジュールをコマンドラインからインストールすることができます。

 

npmを使って、gulpなどのインストールを行なっていきます。

 

※cdコマンドで、プロジェクトフォルダに移動しておく。

 

packege.jsonの作成

「packege.json」は、プロジェクトの情報をまとめておくためのファイルです。

npmコマンドを使うと自動で生成してくれます。

$npm init -y

 

これだけで、プロジェクトフォルダ内にpackege.jsonが出力されます。

 

 

packege.jsonの編集

jackege.jsonの中身は必要なものだけを記述しておけばOKみたいです。

 

{
 "description": "説明",
 "repository": "GitHubなどのURL",
 "license": "ライセンス情報",
 }

 

個人利用する分にはあまり気にする必要はないかもしれませんね。

 

 

gulpのインストール

いよいよgulpのインストールです!!長かった。。

npmコマンドを使って、インストールしていきます。

 

$npm install gulp -D

 

 

gulpのバージョンを確認します。

$npx gulp -v

 

 

<バージョンを指定したインストール方法>
3.X.X→4.X.Xをインストールする方法

$npm i -D gulp@next

 

 

以上でgulpの環境構築(インストールまで)が完了です!!

長かったですね。。。

 

gulpのタスク追加方法について

gulpのタスク追加方法については、のせっちさん(@yukinouz1)のブログ記事が参考になります。

 

また、りょうまさん(@ytq_ryoma)のブログにも詳しくまとめられていますので、参考にしつつ、自分にあったタスクを追加するといいですね。

 

gulpについて理解を深めることで応用にも対応できるはずです。

gulpとは何か?どんなことができてそんな処理の流れをするのか?

順序立てて解説してくれるのが「Webデザイナーの仕事を楽にする!gulpではじめるWeb制作ワークフロー入門

 

 

 

 

Sassの教科書なので、gulpを使ったSassのコンパイル方法から入り、

作業効率化できるgulpのタスクを紹介されています。

 

 

業務効率化の手段を学ぶことは、時間を買うことです。

gulpで作業爆速化!今まで以上に手を動かせば学べることも数倍?!ツールでできることはツールに全てやってもらいましょう。