Share

こんにちは。「楽してサイトのコーディングしたい」と常日頃考えているますけです。

今回はそんな方にぴったりなツール「gulp」をご紹介したいと思います。

gulpとは?

gulpはNode.jsをベースにしたタスクランナー。

タスクランナーとは、様々な処理「タスク」を自動化して行うことができるツールです。

例えば、sassのコンパイル自動化、画像の容量圧縮、JSの圧縮、ファイル変更時にブラウザを自動でリロードするなど、様々な操作を自動化することができます。

それにより、コーディングを「楽に」「早く」行うことが可能です。

gulpの特徴

記述方法はJavascript形式なので、Web制作でJavascriptの扱いに慣れている人は導入しやすいと思います。

また、非同期処理なので処理時間も短いです。

似たような機能を持ったものに、Gruntと言うものがあります。

こちらは、JSON形式で記述します。こちらは同期処理でgulpよりも処理速度が遅いです。

どうやって使うの?

具体的に使い方を見ていきます。
今回はMacでの使用法を書いていきます。

node.jsをインストール

gulpを使うためには、Node.jsをダウンロードする必要があります。

https://nodejs.org/ja/

今回は推奨版をダウンロードします。

インストールができたらコマンドラインを起動します。

Macの場合は「ターミナル.app」を使用します。

ターミナルは、

[アプリケーション]フォルダー →[ユーティリティ]フォルダー →[ターミナル]

で起動できます。

もしくはSpotLigthで「ターミナル」と打てば、すぐ出てきます。

ターミナルを起動して、

node -v

でNode.jsのバージョンが表示されていれば、インストール成功です。

package.jsonファイルの作成

package.jsonファイルとは、プロジェクトの情報を記載する為のファイルです。

プロジェクト毎に必要なパッケージの名前とバージョンを書いておけば、他の人と一緒に開発を進めるときも簡単に同じ環境が作れます。

早速作っていきます。

Webサイトのファイルを保存するディレクトリを作成し、ターミナル上で移動します。

cd /Users/******/website

※cd・・・チェンジ・ディレクトリの略。フォルダの階層を移動するコマンド
※「******」はOSのユーザー名

移動後、次のコマンドを入力してpackage.jsonファイルを作成します。

npm init

いくつか質問をされるので、必要に応じて入力していきます。

※もし、質問に答えるのが面倒であれば「npm init -y」で全ての質問にyesで答えることができます。

これでpackage.jsonが作成されました。

gulpのインストール

次にgulp本体をインストールします。

今回作成したフォルダにのみインストールします。

npm install -D gulp

※-Dで特定のフォルダ(ローカル)にインストールされます。
※npm install -g gulp-cliでPC全体(グローバル)にインストールすることも可能ですが、あまり一般的ではありません。

これでgulpを使うことができるようになりました。

おわりに

次回は、gulpのパッケージである「gulp-sass」を使って、 Sassを使う方法を紹介します。

株式会社 ヤップ エンジニア

升田 圭亮

ヤップのコーディング、プログラミング担当。日々学んだことを発信。

記事中の画像データを使いたい!や、この記事もっと詳しく書いて欲しいなどのご要望、ご意見は上記お問合せをクリック、もしくはお電話ください。

06-6445-7317