gulpとは?始め方使い方をわかりやすく解説

gulp 未分類
gulp

フロントエンドやweb制作会社のエンジニアの方はよく耳にするgulp(ガルプ)。

使ってみたらグーグル翻訳のように便利だったのでこれからgulpを使う人、自分の備忘録ようとして記事にまとめておこうと思います。

 

この記事を読むメリット

gulpの概要がわかる
gulpの環境構築方法がわかる
gulpの使いかたがわかる

gulpとは

gulp(ガルプ)とはフロントエンドの開発時に発生するコードをwebブラウザ上でビジュアル化して確認する作業を自動化してくれるツールです。

  • pugファイルのコンパイル
  • scssファイルのコンパイル
  • type scriptのコンパイル
  • htmlの圧縮
  • cssの圧縮
  • jsの圧縮
  • 画像の圧縮

など様々なことを自動で行ってくれます。

すごい便利です。

 

gulpを使うための環境構築方法

gulpを使うためにはnode.jsとnpmが必要となります。

node.jsとはjsをバックグラウンドで動かすための環境です。

npmとはnode.jdを管理したりパッケージをインストールする時に使用するものです。

node.jsとnpmのインルトール方法

node.jsとnpmをインストールする方法は簡単でこちらからファイルをダウンロードし、インストーラを起動させることでかんたにインストールできます。

ダウンロードは推奨版をおすすめします。

 

適切にインストールできたか確認

CUI、ターミナルから確認できます。

ターミナルを開き、以下のコマンドを実行することでnode.jsのバージョンを確認することができます。

無事バージョンが表示されればインストールは成功です。

次にnpmのバージョンも確認します。

 

node.jsもnpmも以下のようにバージョンが表示されますがもし表示されない場合はダウンロードからやり直すか、最新版をインストールして見てください。

gulpをインストールするためのディレクトリを作る

gulpをインストールするためのディレクトリをあらかじめ作っておきます。

ターミナルを開きディレクトリを制作したいディレクトリまで移動します。

今回はdesktopに作ることにしようと思います、ですのでまずdesktopへ移動しましょう。

移動するためのコマンドは「cd」です。

desktopへ移動できたらそこに「testgulp」というディレクトリを作ります。

ディレクトリを制作するコマンドは「mkdir」です

ディレクトリ名をgulpにしてしまうと後々エラーが起こるので他の名前にしておきましょう。
ディレクトリを制作したら制作したディレクトリへ移動します。

package.jsonファイルを作る

以下のコマンドをtestgulpディレクトリ内で実行することでpackage.jsonが生成されます。

無事生成されたか確認しましょう

testgulpディレクトリで「ls」を実行することでそのディレクトリの内容を見ることができます。

もしくは「cat」でpackage.jsonの中身を見ます。

このようなものが表示されればokです。

 

gulpをインストールする

ここでようやく本命のgulpがインストールできます。

以下のコマンドを実行しましょう

正常にインストールできたか確認しましょう

インストールされるとpackage.jsonに情報が書き込まれるのでpackage.jsonの中身を確認します。

中身が以下のように変更されていればokです。

 

もしインストールが正常に行かなかった場合はこちらを参考にしてください。

正常にインストールできましたらインストールしたディレクトリに

  • gulpfile.js
  • node_modules
  • package-lock.json
  • package.json

が自動生成されます。

使用するのはgulpfile.jsのみですので他はシカトして大丈夫ですが、消去はしないでください。

gulpfile.jsに処理内容を記載することでコンパイルなどを自動化することができます。

これでgulpを使うための環境構築は終了しました。

gulpの使い方

では実際にgulpfile.jsに処理を記載してgulpを使っていきましょう。

よく使うであろう機能をいくつか紹介していきます。

 

が、gulpの記載方法は2種類あるようで、taskを使って書く方法とallow関数を使って書く方法があります。

taskを使って書く方法は古い方法らしく、挙動がおかしいことがあるようですのでなるべくallow関数を使って書くようにしましょう。

実際、筆者の場合も動かない処理があり苦労しました。

 

ですがallow関数で記載する方法を解説しているwebサイトが少ないので探り探りといったところです。

 

scssをコンパイルする

まず、scssをコンパイルするためのプラグインをインストールします。

ターミナルから以下のコマンドを実行してください。

正常にインストールされたか気になるかたは「cat package.json」コマンドで確認して見てください。

 

次にgulpfile.jsに処理を記載していきます。

 

処理の説明はコメントの通りです。

少し難しい部分のみ解説します。

「src」の部分にコンパイルしたいファイルのパスを記載します。

今回はsrcの中のscssの中のscssファイルをコンパイルしたいと思います。「*.scss」はscssという拡張子全てという意味です。

 

「expanded」を「compressed」に変更すると改行なしの圧縮されたファイルが生成されます。

コンパイルして生成されたcssファイルを保存する場所のパスを記載します。

 

実行する方法はターミナルで以下のコマンドを実行します。

 

scssファイルが保存されたら自動でコンパイルする

scssファイルを変更するたんびにターミナルからgulp scssコマンドを叩いていると大変ですよね、ですのでscssファイルが保存されると自動的にコンパイルされるようにしましょう。

 

gulpfile.jsに追加で処理を記載していきます。

「const watchReFilesscss」という行を追加し、「parallel(compilescss);」を「parallel(watchReFilescss);」へ変更します。

 

「watch」でscssファイルを監視し、保存されると「compilescss」の処理が走るようになっています。

「src/scss/*.scss」の部分に監視する対象のファイルのパスを記載します。

 

実行します

監視を終了するためにはcommand+cを押すことで終了できます。

コメント

タイトルとURLをコピーしました