はじめてのGulp
はじめに
本記事はとりあえずGulpの環境を構築してみようという目的で構築手順を記載しています。Gulpには、色々な機能がありますが、最低限使用する機能を中心に構築しています。
動作環境
Mac M1
Mac Intel
概要
Web開発を効率を行うためのツールです。
Gulpを使うと以下の作業などを全部自動化してくれます。
Sassのコンパイル
CSSの圧縮
ブラウザシンク
(ファイルを編集したら即時にブラウザを更新&反映する自動リロード)ベンダープレフィックスの自動付与
画像の自動圧縮
Babelを使用したJSのコンパイル
webpackと一緒に使ってJSをバンドルして圧縮する
なぜGulpを使うのか?
1〜4のみであれば、VsCodeのDart Sass Complier で十分ですが、5〜7に関しては別のプラグインなどを入れるなど一手間加える必要があります。
また、Dart Sass Complierはエディタに依存するプラグインなので共同開発には向いてません。
その点、Gulpはpackage.jsonとgulpfile.jsを共有させすれば同じ環境設定で開発を行うことができるメリットがあります。
このような理由から共同開発するうえでほぼ必須とも言えます。
Gulpを使うには…
Gulpを使うには以下が必要です。
Gulpをインストールするには、Node.js → npm → gulp という順番で構築していきます。
Node.js
npm
gulp
Node.jsをインストールの前に…
Node.jsをインストールしていくのですが、インストールにはいくつか方法があります。
公式サイト
Homebrew
nodebrew などなど
本記事はHomebrewを使ってnodebrewをインストールしていきます。
nodebrewでNode.jsやnpmのバージョンを切り替えることが可能になり、案件ごとに切替が容易になります。
Homebrew
インストール
nodebrewを使うために、Homebrewというパッケージマネージャをインストールします。
Homebrewの公式サイトにアクセスすると以下の画面が表示されます。
赤枠のコマンドをコピーして、ターミナルで実行することでhomebrewのインストールを行います。
「Installation successful!」 が表示されれば完了です。
homebrewインストール後にパスを通すために、インストール時の「Next steps:」に記載されている箇所のコマンドを順次実行します。
以下は実行例になります。 ※○○○はUser名を表しています
インストールされているかを確認するため、ターミナルを開き直すか、sourceコマンドで反映させてからバージョンを確認してみます。
バージョンが表示されていればインストール完了です。
Node.js
Nodebrewのインストール
nodebrewをインストールします。
nodebrewがインストールされているかを確認するために
以下のコマンドを実行してバージョンが表示されるかを確認します。
Node.jsのインストール
インストールするにあたってインストール可能なバージョンを確認します。
以下のコマンドで一覧を確認できます。
インストールするバージョンを決めたら、以下のコマンドを実行してインストールを進めます。ここでは、19.0.0を入れる例を記載します。
「Installed successfully」 が表示されていれば完了です。
インストール時に以下のようなエラーが表示される場合
Fetching: https://nodejs.org/dist/v19.0.0/node-v19.0.0-darwin-arm64.tar.gz
Warning: Failed to open the file
Warning: /Users/〇〇〇/.nodebrew/src/v19.0.0/node-v19.0.0-darwin-arm64.tar.
Warning: gz: No such file or directory
download failed: https://nodejs.org/dist/v19.0.0/node-v19.0.0-darwin-arm64.tar.gz
対処方法
以下のコマンドを実行してから再度インストールすることで対処できます。
Node.jsを有効化する
まずは現在どのバージョンがインストールされているかを確認します。
以下は、19.0.0がインストール、有効化されていないことが確認できます。
インストールされているNode.jsのバージョンを有効化してみます。
currentにバージョンが反映されていることが確認できます。
Node.jsを使用できるように環境変数にパスを設定します。
Node.jsを使用できるかを確認するため、ターミナルを開き直すか、sourceコマンドで反映させてからバージョンを確認してみます。
バージョンが表示されていればインストール完了です。
npmのインストール
npmは、Node.jsをインストールした段階で自動でインストールされています。以下のコマンドで確認してみます。
Gulp
Gulpの導入
Gulpを動作させる環境を作成します。
1. Gulpを格納するフォルダ構成を作成
2. package.jsonの作成
npmコマンドでpackage.jsonを作成します。
3. プラグインをインストール
GulpでSassをコンパイルするためには次の2つのモジュールが必要です。
gulp(Gulp本体)
gulp-dart-sass(Sassをコンパイルするためのプラグイン)
そのほかにも便利で必要なものがあるのでインストールします。
gulp-plumber
エラーが発生しても強制終了させないためのプラグインgulp-notify
エラー発生時やコンパイル成功時にアラートを出力するためのプラグインbrowser-sync
ブラウザリロードするためのプラグイン
これらをインストールするためにはコマンドから実行します。
実行すると以下のように package.jsonに記載が追加されます。
4. タスクの作成
自動化したいタスクをgulpfile.jsに記述します。
タスクとは、例えば以下のようなものです。
Sassのコンパイル
ファイルを編集したら即座にブラウザを更新して反映する自動リロード(ブラウザシンク)
ベンダープレフィックスの自動付与
画像の自動圧縮
Babelを使用したJSのコンパイル
webpackと一緒に使ってJSをバンドルして圧縮
_gulpフォルダ直下にgulpfile.jsを作成します。
gulpfile.jsファイルの設定として以下の例を記述します。
Dart Sass でコンパイル
コンパイルエラーでも継続実行
ブラウザシンク
5. 動作確認させるためのフォルダ構成を作成
以下のフォルダ構成を作成します。
今回作成したHTML/Sass ファイルは以下からダウンロードできます。
_gulpファイル以降のファイルは 1〜4で作成したファイルを使用します。
各ファイルに記述する内容は以下を参照
gulp-test/_static/index.html
gulp-test/_assets/scss/modules/_c-title.scss
gulp-test/_assets/scss/modules/_index.scss
gulp-test/_assets/scss/style.scss
6. 動作確認
Gulpを起動して動作を確認します。
Gulpを起動すると以下のような出力されます。
[23:30:00] Using gulpfile ~/〇〇〇/〇〇〇/gulp-test/_gulp/gulpfile.js
[23:30:00] Starting 'default'...
[23:30:00] Starting 'html'...
[23:30:00] Starting 'cssSass'...
[23:30:00] Finished 'html' after 54 ms
[23:30:00] gulp-notify: [Gulp notication] Sassをコンパイルしました!
[23:30:00] Finished 'cssSass' after 75 ms
[23:30:00] Starting 'watchFiles'...
[23:30:00] Starting 'browserSyncFunc'...
[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.19:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------
[Browsersync] Serving files from: ../_static/dist
また、ブラウザも立ち上がります。
この状態で、_c-title.scssを開き、h1のcolorをblueからredに変えて
command+Sで保存してみると、自動コンパイル&ブラウザリロードされ、
変化することを確認できます。
また、gulpを停止したい場合は ctrl + c で停止できます。
さいごに
今回はとりあえずGulpの環境を構築して動かしてみようという目的で手順を記載したため、gulpfile.js などの細かい設定の説明は省略しています。
gulpfile.jsへの記述やプラグインのインストールでカスタマイズでき、効率的に作業を進めることができます。積極的に使っていきましょう。
この記事が気に入ったらサポートをしてみませんか?