【たった５分で完了】「gulp」の導入方法と使用例を紹介します

gulp（ガルプ、以下gulp）とはどういうものかご存じですか？
gulpとは、タスクを自動化するツールの一つで、画像の圧縮などに使われています。
この記事では、そもそもgulpとはどういったものなのか、インストールの方法、使用例などを、わかりやすく解説します。

gulpってなに？

gulpとは

gulpはNode.jsをベースとしたタスクランナーの一つです。
タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、作業の効率化に使われています。

gulpを使うことで以下のような手間や時間がかかる作業を自動化できます。

• cssにベンダープレフィックスをつける
• cssのプロパティをアルファベット順に並べ替える
• ソースマップの作成
• SassやLESSのコンパイル
• 画像(jpeg, png, gif)、css、javascriptの圧縮
• PC・スマホ・タブレットの実機確認
• javascriptの構文チェック
• ブラウザのリロード

例えば、「画像、css、javascriptの圧縮」が行われると、ページの読み込み速度が速くなり、ユーザビリティの向上につながります。

gulp導入のメリット3選

gulp導入のメリットは大きく分けて、3つあります。

①煩雑な処理を自動で行うことができるため、作業を効率的に進められる。
②自動化により、人的ミスが減ることで、作業時間を短縮できる。
③複数人での作業環境を統一することができ、一定の品質を保った開発が可能になる。

このようにgulpを導入することで、WEB制作者にとっては様々なメリットがあるのです。

実際にgulpをインストールしてみよう

gulpには様々なメリットがあることをご紹介しましたが、この章では実際にgulpを導入する手順について解説します。

Node.jsをインストールする

まずNode.jsを次のサイトからインストールしてください。

・Node.js

Windows：コマンドライン（一部PowerShellを使用）
Mac：ターミナル

に相当するアプリケーションを起動し、以下のコマンドを入力し、実行してください。

※白塗の部分はユーザー名です。

このように入力し、バージョン番号が表示されればインストールは完了です。

Node.jsについてはこちらをご覧ください。

JavaScriptをサーバサイドで動かせる！Node.jsの魅力とは？

npmによるインストール

次にパッケージ（各種フレームワークやライブラリ）を準備する作業を行います。
プロジェクトのファイル一式を保存するフォルダを任意の場所に作成し、コマンドラインでフォルダを作成した場所に移動します。

今回はDocumentsフォルダの中にtestというフォルダを作成しました。
コマンドラインで以下のように入力して移動してください。

移動が完了しましたら、コマンドラインで以下のコマンドを入力してください。
（-yはYESの意味です。）

入力が完了すると、パッケージ（各種フレームワークやライブラリ）を管理するために使われるpackage.jsonファイルが作成されます。

※参考：作成後のpackage.jsonファイルの中身は以下のとおりです。

gulpのインストール

次にgulpをインストールしていきます。
コマンドラインで次のコマンドを入力してください。

①gulpをグローバルインストール

②gulpをローカルインストール

グローバルインストールをすると、そのPC上のどこからでも利用できるようになります。
ローカルインストールをすると、そのプロジェクトのフォルダ内でのみ適用されます。

gulpfile.jsの作成

これでインストールは完了です。
続いて、gulpを使えるようにします。

package.jsonファイルと同じディレクトリに gulpfile.jsというファイルを新規作成します。

gulpfile.jsを開き、以下のように記述し保存します。

これで、実際にgulpが使えるようになりました。

gulpでSassをコンパイルしてみよう

SCSSファイルの作成

コンパイルとは、「Sassファイル」を「CSSファイル」に変換することです。
実際にgulpでSassのコンパイルをしてみます。
まずsassファイルを作り、その中にscssファイルを作成します。

・sass/style.scss

参考に以下のように記述しておきます。

style.scss

プラグインのインストール

次にgulp-sassというSassのコンパイルプラグインを入れていきます。

コマンドライン上で以下のように入力し、インストールしていきます。

タスクの登録

インストールが完了したら、gulpfile.jsを開いてタスクを登録します。
以下のように記述します。

• gulp.task(“sass”,function(){　でタスクの登録
• gulp.src(“sass/**/*.scss”)　で呼び込むファイルを指定（今回はsassファイル以下のファイル）
• .pipe(sass({outputStyle: ‘expanded’}))　で呼び込んだファイルに行う処理を記述
• pipe(行いたい処理)         でsrcで取得したファイルに処理を記述
• pipe(gulp.dest(“./css”))　で出力先を指定（今回はcssファイル）

コンパイルの実行

いよいよコンパイル（CSSファイルへ変換）していきます。
次のように記述します。

実行すると、CSSディレクトリ内にstyle.cssファイルが生成されているはずです。

出力結果
style.css

gulpを使ってSassをコンパイルできました。

Sassについては詳しくはこちらをご覧ください。

CSSの代わりにSassを使って、コードのメンテナンス性を高めよう！

watch機能の使い方

watch機能とはSassファイルに変更があった場合に、自動的にCSSにコンパイルする機能のことです。

この機能を追加した後は一度コマンドラインでgulpと入力さえすれば、自動的にCSSファイルにも変更が加えられるようになります。

gulpfile.jsに次のように記述していきます。

gulp.watch(‘監視するファイル’, 処理)　と記述したことで、先ほど設定した「sass」の処理（SassファイルをCSSファイルへ変換）を自動で実行するようになりました。

便利なgulpプラグイン

gulpのプラグインページには様々なプラグインが一覧表示されています。概要の一部を載せておきましたので、必要に応じてインストールしてみてください。

• gulp-cssmin … CSSの圧縮
• gulp-imagemin … 画像の圧縮
• gulp-htmlmin … HTMLの圧縮
• gulp-csscomb　cssプロパティ順序整理
• gulp-sass … Sassのコンパイル
• gulp-notify　エラーを通知
• gulp-rename … ファイル名の変更

gulpのhelpコマンド

helpとは、「取扱い説明書」のことで、gulpコマンドの一覧と機能の概要を見ることができます。
gulpのhelpを確認するには、次のようにコマンドラインに入力します。

以下のとおりgulpのhelpが表示されます。

まとめ

gulpは今回ご紹介したSassのコンパイル以外にも様々な作業を自動化できるツールです。
gulpを使うことで、人的ミスが少なくなり作業時間の短縮につながります。
この機会にgulpの導入を検討してみてはいかがでしょうか。

また、ランディングページ（LP）での集客獲得にお悩みの方は、こちらの記事をご覧ください。

「デザインじゃない！？」ランディングページ（LP）で顧客獲得を最大化させる正攻法を大公開

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

---

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

【2024年4月法改正】ウェブアクセシビリティ状況、診断してみませんか？

株式会社デジタルアイデンティティでは、ウェブアクセシビリティ診断サービスを提供しています。

2024年4月、障害者差別解消法の改正施行に伴い、2024年6月から一般企業にも「合理的配慮」が義務化されます。
これに伴い、努力義務である「環境の整備」に含まれるウェブアクセシビリティについても、対応を進める企業が増えています。

こんなお悩みはありませんか？

• どこからウェブアクセシビリティ対応に手をつければ良いかわからない…
• 今のサイトで問題のあるページを一覧化して欲しい…
• ウェブアクセシビリティの具体的な改善方法を知りたい…

WCAG2.2に準拠した診断項目・達成基準で、問題のあるページをリスト化してページ単位で問題点をリストアップ。
課題点が明確になるので、具体的な改善アクションに繋げることができます。

また、診断後の改善作業を弊社にワンストップでご依頼いただくことも可能です！
ぜひお気軽にご相談ください！

ウェブアクセシビリティ診断のお申し込みはこちら