見出し画像
Photo by mericanadesico

はじめてのGulp

はー

はじめに

本記事はとりあえずGulpの環境を構築してみようという目的で構築手順を記載しています。Gulpには、色々な機能がありますが、最低限使用する機能を中心に構築しています。

動作環境

  • Mac M1

  • Mac Intel

概要

Web開発を効率を行うためのツールです。
Gulpを使うと以下の作業などを全部自動化してくれます。

  1. Sassのコンパイル

  2. CSSの圧縮

  3. ブラウザシンク
    （ファイルを編集したら即時にブラウザを更新＆反映する自動リロード）

  4. ベンダープレフィックスの自動付与

  5. 画像の自動圧縮

  6. Babelを使用したJSのコンパイル

  7. 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!」 が表示されれば完了です。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

homebrewインストール後にパスを通すために、インストール時の「Next steps:」に記載されている箇所のコマンドを順次実行します。
以下は実行例になります。 ※○○○はUser名を表しています

$ echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/○○○/.zprofile
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/○○○/.zprofile
$ eval "$(/opt/homebrew/bin/brew shellenv)"

インストールされているかを確認するため、ターミナルを開き直すか、sourceコマンドで反映させてからバージョンを確認してみます。
バージョンが表示されていればインストール完了です。

$ brew -v

Node.js

Nodebrewのインストール

nodebrewをインストールします。

$ brew install nodebrew

nodebrewがインストールされているかを確認するために
以下のコマンドを実行してバージョンが表示されるかを確認します。

$ nodebrew -v

Node.jsのインストール

インストールするにあたってインストール可能なバージョンを確認します。
以下のコマンドで一覧を確認できます。

$ nodebrew ls-remote

インストールするバージョンを決めたら、以下のコマンドを実行してインストールを進めます。ここでは、19.0.0を入れる例を記載します。
「Installed successfully」 が表示されていれば完了です。

$ nodebrew install-binary v19.0.0

インストール時に以下のようなエラーが表示される場合

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

対処方法
以下のコマンドを実行してから再度インストールすることで対処できます。

$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary stable

Node.jsを有効化する

まずは現在どのバージョンがインストールされているかを確認します。
以下は、19.0.0がインストール、有効化されていないことが確認できます。

$ nodebrew ls
v19.0.0
current: none

インストールされているNode.jsのバージョンを有効化してみます。
currentにバージョンが反映されていることが確認できます。

$ nodebrew use v19.0.0
$ nodebrew ls
v19.0.0
current: v19.0.0

Node.jsを使用できるように環境変数にパスを設定します。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

Node.jsを使用できるかを確認するため、ターミナルを開き直すか、sourceコマンドで反映させてからバージョンを確認してみます。
バージョンが表示されていればインストール完了です。

$ node -v

npmのインストール

npmは、Node.jsをインストールした段階で自動でインストールされています。以下のコマンドで確認してみます。

$ npm -v

Gulp

Gulpの導入

Gulpを動作させる環境を作成します。

1. Gulpを格納するフォルダ構成を作成

+ gulp-test
　+ _gulp

２. package.jsonの作成

npmコマンドでpackage.jsonを作成します。

$ cd gulp-test/_gulp
$ npm init -y

 3. プラグインをインストール

GulpでSassをコンパイルするためには次の2つのモジュールが必要です。

  • gulp（Gulp本体）

  • gulp-dart-sass（Sassをコンパイルするためのプラグイン）

そのほかにも便利で必要なものがあるのでインストールします。

  • gulp-plumber
    エラーが発生しても強制終了させないためのプラグイン

  • gulp-notify
    エラー発生時やコンパイル成功時にアラートを出力するためのプラグイン

  • browser-sync
    ブラウザリロードするためのプラグイン

これらをインストールするためにはコマンドから実行します。

$ npm i gulp gulp-dart-sass gulp-plumber gulp-notify browser-sync

実行すると以下のように package.jsonに記載が追加されます。

4. タスクの作成

自動化したいタスクをgulpfile.jsに記述します。
タスクとは、例えば以下のようなものです。

  • Sassのコンパイル

  • ファイルを編集したら即座にブラウザを更新して反映する自動リロード（ブラウザシンク）

  • ベンダープレフィックスの自動付与

  • 画像の自動圧縮

  • Babelを使用したJSのコンパイル

  • webpackと一緒に使ってJSをバンドルして圧縮

_gulpフォルダ直下にgulpfile.jsを作成します。
gulpfile.jsファイルの設定として以下の例を記述します。

  • Dart Sass でコンパイル

  • コンパイルエラーでも継続実行

  • ブラウザシンク

//gulp本体
const gulp = require('gulp');

//sass
//Dart Sass はSass公式が推奨 @use構文などが使える
const sass = require('gulp-dart-sass');
// エラーが発生しても強制終了させない
const plumber = require("gulp-plumber");
// エラー発生時のアラート出力
const notify = require("gulp-notify");
//ブラウザリロード
const browserSync = require("browser-sync");

// 入出力するフォルダを指定
const srcBase = '../_static/src';
const assetsBase = '../_assets';
const distBase = '../_static/dist';

const srcPath = {
　'scss': assetsBase + '/scss/**/*.scss',
　'html': srcBase + '/**/*.html'
};

const distPath = {
　'css': distBase + '/css/',
　'html': distBase + '/'
};

// sass
const cssSass = () => {
　return gulp.src(srcPath.scss, {
　　sourcemaps: true
　})
　.pipe(
　　//エラーが出ても処理を止めない
　　plumber({
　　　errorHandler: notify.onError('Error:<%= error.message %>')
　　}))
　//指定できるキー expanded compressed
　.pipe(sass({ outputStyle: 'expanded' }))
　.pipe(gulp.dest(distPath.css, { sourcemaps: './' })) //コンパイル先
　.pipe(browserSync.stream())
　.pipe(notify({
　　message: 'Sassをコンパイルしました！',
　　onLast: true
　}))
}

// html
const html = () => {
　return gulp.src(srcPath.html)
　.pipe(gulp.dest(distPath.html))
}

// ローカルサーバー立ち上げ
const browserSyncFunc = () => {
　browserSync.init(browserSyncOption);
}

const browserSyncOption = {
　server: distBase
}

// リロード
const browserSyncReload = (done) => {
　browserSync.reload();
　done();
}

/**
* ファイル監視 ファイルの変更を検知したら、browserSyncReloadでreloadメソッドを呼び出す
* series 順番に実行
* watch('監視するファイル',処理)
*/
const watchFiles = () => {
　gulp.watch(srcPath.scss, gulp.series(cssSass))
　gulp.watch(srcPath.html, gulp.series(html, browserSyncReload))
}

/**
* seriesは「順番」に実行
* parallelは並列で実行
*/
exports.default = gulp.series(
　gulp.parallel(html, cssSass),
　gulp.parallel(watchFiles, browserSyncFunc)
);

5. 動作確認させるためのフォルダ構成を作成

以下のフォルダ構成を作成します。
今回作成したHTML/Sass ファイルは以下からダウンロードできます。
_gulpファイル以降のファイルは 1〜4で作成したファイルを使用します。

+ gulp-test
　+ _assets
　　+ scss
　　　+ modules
　　　　+ _c-title.scss
　　　　+ _index.scss
　　　+ style.scss
　+ _gulp
　　+ node_modules
　　　+ ・・・
　　+ gulpfile.js
　　+ package-lock.js
　　+ package.js
　+ _static
　　+ src
　　+ index.html

各ファイルに記述する内容は以下を参照

  • gulp-test/_static/index.html

<!DOCTYPE html>
　<html lang="ja">
　　<head>
　　　<meta charset="UTF-8">
　　　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　<title>はじめてのGulp</title>
　　　<link rel="stylesheet" href="css/style.css">
　　</head>
　<body>
　　<h1><span>Hello Gulp!</span></h1>
　</body>
</html>

  • gulp-test/_assets/scss/modules/_c-title.scss

h1 {
　color: blue;
　span {
　　display: flex;
　　align-items: center;
　　position: relative;
　　&::before,&::after {
　　　content: '';
　　　display: block;
　　　width: 30px;
　　　height: 2px;
　　　background-color: green;
　　}
　　&::before {
　　　transform: rotate(45deg);
　　}
　　&::after {
　　　transform: rotate(-45deg);
　　}
　}
}

  • gulp-test/_assets/scss/modules/_index.scss

@use './c-title';

  • gulp-test/_assets/scss/style.scss

@charset "UTF-8";
@use './moduleds/index';

6. 動作確認

Gulpを起動して動作を確認します。

$ npx 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への記述やプラグインのインストールでカスタマイズでき、効率的に作業を進めることができます。積極的に使っていきましょう。

この記事が気に入ったらサポートをしてみませんか？