文系卒のWebエンジニアの成長と備忘録
エンジニア経験を生かして発信するメディアサイト

gulp4とbrowser-syncを使用したブラウザ自動更新機能作成

auto programming

Web上の画面を作成する際に、HTMLやCSSを触ると思いますが、ファイルを修正する度にブラウザを手動でリロードするのって面倒くさくないですか？

gulpとbrowser-syncというものを使用してファイルが修正する度に、自動でブラウザを更新してくれる機能を作成したいと思います。以下のようなものです。

目次

  1. 【環境構築編】自動更新を使用できるようになる環境を作成しよう①
  2. 【環境構築編】自動更新を使用できるようになる環境を作成しよう②
  3. 【コーディング編】自動化できるプログラムを書いていこう
  4. 【動作環境編】ブラウザが自動でリロードされるか確認しよう
  5. 【おまけ】scss, sassを自動コンパイルするプログラムを書いていこう


【環境構築編】自動更新を使用できるようになる環境を作成しよう①

ブラウザの自動更新には、gulpとbrowser-sync呼ばれるNode.jsで使用できるパッケージが必要になります。
そのため、Node.jsおよびにそのパッケージマネージャーのnpmというものをインストールする必要がります。

["Macの方"]
　→ Homebrewのnodebrewというものを使用するとインストールが楽です。
["Windowsの方"]
　→ NodeJSの公式サイトからインストールを行います。
　※nodeのバージョンが同じではないと動かない可能性があります。出来るだけ同じにしてください。

この記事で動かしている環境

  • nodebrew 1.0.0
  • node 10.15.0

※追記
以下では、nodebrewを使用していますが、nodeのバージョンが上記では多少古いです。そのためnvm（node version manager）を使用するとある程度最新版に近い状態で入れることが可能です。

以下の記事で詳しく解説しています。

Darablog
Vagrantで【nvm】を使用して《node.js》と《npm》を入れる方法
https://dara-blog.com/node-install-in-vagrant
こんにちはYsです。Web系エンジニアとして働いています。最近、LaravelというPHPフレームワークで開発の勉強をしていますが、その際にwebpack使用するためには《npm》と《node》が必要と分かり、インストール方法を書いておきます。※構築した環境 Centos7.1 (virtua...

Homebrewのインストール

以下のコマンドを実行し、その後brewが正しくインストールされたのか確認します。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
[brewが正しくインストールされたのか確認する]
$ brew -v
　　・成功
　　　→ Homebrew 2.0.2と出力されていればOK
　　・失敗
　　　→ command not foundと出力されているとうまくインストールされていないです

nodebrewのインストール

1. nodeを扱うnodebrewというパッケージをbrewコマンドを使用してインストール
2. インストールしたnodebrewを使用して、実際にnodeをインストール

$ brew install nodebrew
[nodebrewが正しくインストールされたのか確認する]
$ nodebrew -v
　・成功
　　→ nodebrew 1.0.0と出力されていればOK
　・失敗
　　→ command not foundと出力されているとうまくインストールされていないです

nodebrewの環境変数にPATHを通す

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

このときに何も出力されないですが別段OK。nodebrewを使用する際の通り道を設定したと思ってください。

nodeを入れるための箱（ディレクトリ）を作成する

実際にnodeを入れるためにはnodebrewの中に箱（ディレクトリ）が必要になります。バージョンにもよりますが作成していないと、下記の作業でエラーが発生し止まります。
何で融通利かして自動で作成してくれないんや。。と思いつつ作成しましょう。

$ mkdir -p ~/.nodebrew/src

nodeのインストール

nodeを入れるための箱が作成されたので、nodeを実際にインストールしますが、今回は環境を同じにするためバージョンを指定してインストールします。
まず今回インストール出来るバージョンがあるのかnodebrew ls-remoteというコマンドを使用して確認をします。今回使用する10.15.0を探してみてください。

$ nodebrew ls-remote
v10.0.0   v10.1.0   v10.2.0   v10.2.1   v10.3.0   v10.4.0   v10.4.1   v10.5.0
v10.6.0   v10.7.0   v10.8.0   v10.9.0   v10.10.0  v10.11.0  v10.12.0  v10.13.0
v10.14.0  v10.14.1  v10.14.2  v10.15.0  v10.15.1  v10.15.2  v10.15.3

見つけることができたらバージョンを指定してインストールを行います。

$ nodebrew install-binary v10.15.0

node -vで実際にnodeがインストールされたのか確認をします。ついでに、nodeのパッケージマネージャーnpmもインストールされたのか確認します。コマンドはnpm -vを使用

# nodeがインストールされているのか確認
$ node -v
v10.15.0

# npmがインストールされているのか確認
$ npm -v
6.4.1
・うまくインストールされてない場合
→　command not foundという出力がされていると失敗しています

【環境構築編】自動更新を使用できるようになる環境を作成しよう②



基本的な環境構築が終わりましたが、実際にはまだパッケージのインストールや必要手順があるので以下の手順で行います。

  • 必要なディレクトリを作成
  • package.jsonを作成
  • パッケージをインストール

必要なディレクトリを作成

今回作成するのは以下の構成で大元のディレクトリ(DesignDir)が存在し、それぞれhtml, css, jsディレクトリが一つ下の階層が存在する形にしたいと思います。
そして、実際に自動化に必要なツールは_devtoolsというディレクトリの下に入れていきます。任意の場所に作成してください。

DesignDir
├── _devtools ←ここにパッケージを入れていきます
├── css
├── html
├── js

package.jsonを作成

gulpを使用するには、package.jsonと呼ばれるパッケージを扱う設定ファイルみたいなものが必要になります。とはいってもnpm initというコマンド1つで出来ます。
※上記のコマンドは_devtools内のディレクトリで行なってください
コマンドを打つと色々聞かれますが、基本はpackage name:の部分だけお好みの名前を入れて、あとは全てEnterを押してOK

$ npm init

package name: (_devtools) design_tools　# ここだけお好みで入力
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

# 全ての入力が完了するとpackage.jsonを作成したPATHが出力される
About to write to /Users/username/project/_devtools/package.json:


{
  "name": "design_tools",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

# 以下のように聞かれるのでEnterを押す
Is this OK? (yes)

パッケージをインストール

上記でインストールされたものとは別に、実際に自動化に必要なgulpとbrowser-syncというパッケージ等を入れていきます。
一旦、-gオプションを使用してPC全体にインストールを行います。
その後、専用のディレクトリにインストールを行います。
※以下のコマンドも_devtoolsのディレクトリ配下で行なってください。

■ gulpとは
→ nodeを使用したタスク自動化実行ツール。タスクランナーと呼ばれ、これから使用するbrowser-syncなどの機能をこのgulpが自動化してくれます。

■ browser-syncとは
→ ブラウザの自動化パッケージ。

# 一旦、PC全体にインストールを行う
$ sudo npm install -g gulp

$ sudo npm install -g browser-sync

# 専用プロジェクトにインストールを行う
$ npm install --sav-dev gulp

$ npm install --sav-dev browser-sync

package.jsonを確認

パッケージが無事にインストールされたのかどうか確認をするため、package.jsonの中身を見てみて、devDependenciesというkey値のを確認します。
以下のようにgulpとbrowser-syncがあれば成功です。※gulpのバージョンが4以上であることを確認してください

{
  "name": "design_tools",
  "version": "1.0.0",
  "description": "index.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^4.0.0"
  },
  "dependencies": {
    "install": "^0.12.2",
    "npm": "^6.5.0"
  }
}

【コーディング編】実際に自動化できるプログラムを書いていこう



gulpfile.jsを作成する

コーディングを行うには、gulpfile.jsというファイルを作成してそのファイルにプログラムを書いていきます。package.jsonと同じ場所で作成。

gulpfile.jsをコーディングしていく

①： まずは先ほどインストールしたパッケージ（gulpとbrowser-sync）を使用できるように、変数で宣言します。
var gulp = require('gulp');
var browsersync = require("browser-sync").create();
②： 次に、サーバーを立ち上げるための記述を行います。
baseDir: "../"の部分がサーバーをどこで立ち上げるのかを示しています。
baseDir: "../"なのでgulplfile.jsのファイルの一つ上の階層でサーバーが立ち上がります。
// サーバーを立ち上げる
gulp.task('build-server', function (done) {
    browsersync.init({
        server: {
            baseDir: "../"
        }
    });
    done();
    console.log('Server was launched');
});
③: ブラウザの自動更新の記述をする
browsersync.reload();の部分がブラウザをリロードする機能です。
// ブラウザのリロード
gulp.task('browser-reload', function (done){
    browsersync.reload();
    done();
    console.log('Browser reload completed');
});
④: 監視ファイルを記述する
どこの、どのファイルを編集したらブラウザを自動化させるのか記述。
gulp.watch()というメソッドが自動で指定したファイルを監視してくれます。
*を使用して、全てのディレクトリを対象として、html, css ,jsファイルを監視対象としています。
変更があった場合、先ほど設定した["browser-reload"]のタスクを実行します。
// 監視ファイル
gulp.task('watch-files', function(done) {
    gulp.watch("../*/*.html", gulp.task('browser-reload'));
    gulp.watch("../*/*.css", gulp.task('browser-reload'));
    gulp.watch("../*/*.js", gulp.task('browser-reload'));
    done();
    console.log(('gulp watch started'));
});

⑤: 全てのタスクを実行する記述する
ターミナル画面からコマンドを実行すると今まで設定したタスクが自動で実行してくれます。
処理的には以下の手順で動いています。
1. サーバーを立ち上げるbuild-server
2. ファイルを監視するwatch-files
3. 監視対象のファイルに変更があったらブラウザをリロードするbrowser-reload
// タスクの実行
gulp.task('default', gulp.series('build-server', 'watch-files', function(done){
    done();
    console.log('Default all task done!');
}));

コーディング全体像

上記全てを合わせると以下のような全体像になります。

var gulp = require('gulp');
var browsersync = require("browser-sync").create();

// サーバーを立ち上げる
gulp.task('build-server', function (done) {
    browsersync.init({
        server: {
            baseDir: "../"
        }
    });
    done();
    console.log('Server was launched');
});

// 監視ファイル
gulp.task('watch-files', function(done) {
    gulp.watch("../*/*.html", gulp.task('browser-reload'));
    gulp.watch("../*/*.css", gulp.task('browser-reload'));
    gulp.watch("../*/*.js", gulp.task('browser-reload'));
    done();
    console.log(('gulp watch started'));
});

// ブラウザのリロード
gulp.task('browser-reload', function (done){
    browsersync.reload();
    done();
    console.log('Browser reload completed');
});

// タスクの実行
gulp.task('default', gulp.series('build-server', 'watch-files', function(done){
    done();
    console.log('Default all task done!');
}));

【動作環境編】ブラウザが自動でリロードされるか確認しよう

環境構築やコーディングが終わったので、実際に動作確認をします。
その前にディレクトリ構成を再度確認。全てディレクトリの中身が以下のようになっているか確認してください。
htmlやcssなどのディレクトリ配下にはそれぞれファイルを作成。

DesignDir
├── _devtools
│   ├── gulpfile.js
│   ├── node_modules
│   ├── package-lock.json
│   └── package.json
├── css
│   └── Index.css
├── html
│   └── Index.html
└── js
    └── main.js

確認ができたら、ターミナルを起動してcdコマンドで_devtoolsディレクトリに移動し、gulpというコマンドを打ちます。
その後、色々出力されますがURLが出力されるはずです。

$ cd _devtools

$ gulp
[11:48:26] Using gulpfile /Users/username/project/_devtools/gulpfile.js
[11:48:26] Starting 'default'...
[11:48:26] Starting 'build-server'...
[11:48:26] Finished 'build-server' after 40 ms
[11:48:26] Starting 'browser-watch'...
Server was launched
[11:48:26] Finished 'browser-watch' after 38 ms
[11:48:26] Finished 'default' after 103 ms
Default all task done!
[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.10.0:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------
[Browsersync] Serving files from: ../

http://localhost:3000が自分がアクセスするURLになります。
これにアクセスすると、真っ白な画面が出ると思いますが、このURLが指し示しているのはDesignDirを示してるからです。
そのため、Index.htmlというファイルにアクセスする場合、http://localhost:3000/html/Index.htmlがURLになります。
アクセスできたら、HTMLファイルやCSSファイルを修正してみて、ブラウザが自動で更新されているのか確認しましょう。

うまく起動された場合、ブラウザの右上に【Browsersync: connected】と表示され、
ターミナル上では以下のように表示されていると思います。

[Browsersync] Reloading Browsers...
[13:57:36] Starting 'browser-reload'...
[13:57:36] Finished 'browser-reload' after 332 μs
Browser reload completed

補足

  • External: http://192.168.10.0:3000はなに？
  • UI: http://localhost:3001はなに？
・External: http://192.168.10.0:3000
外部アクセス可能のURLです。 
Localの方のURL（localhost）は自分のPCからのみアクセスが可能ですが、
ExternalのURLの方は同じネットワークに接続されていれば、PCからでなくてもスマホからでもアクセスできます。 デザイン確認の時に便利です。

・UI: http://localhost:3001
Browser-syncの管理画面です。 
ぶっちゃけ普通にコーディングするだけであればあまり使用しない。 
試しにアクセスしてみて、こういうのがあるのねーくらいでいいです。

【おまけ】scss, sassを自動コンパイルするプログラムを書いていこう

Web系のフロント部分を作成しているときに、デザインをcssではなくsassやscssでコーディングしたいというニーズもあると思います。

gulpの機能の中に、自動でsassやscssファイルをコンパイルし、cssファイルに出力してくれる機能があるので、今回はscssファイルをコンパイルするプログラムを書いていこうと思います。

上記で作成したプログラムを改修しつつ、1つだけ必要なパッケージをインストールする必要があります。

  • 必要なディレクトリを作成
  • Sassコンパイラパッケージをインストール
  • コンパイルのコーディング
  • 動作確認

必要なディレクトリを作成

sassファイルを入れておく、sassディレクトリを作成しておきます。
最終的には以下のようなディレクトリ構成になっています。

DesignDir
├── _devtools
├── css
├── html
├── js
└── scss ←このディレクトリを作成

上記で作成したscssディレクトリ内にscssファイルを作成します。ファイル名は任意で構いません。

Sassコンパイラパッケージをインストール

sassをコンパイルするパッケージはnpmの中に用意されているので、それをインストールします。 _devtoolsディレクトリ内で以下のコマンドを実行。

$ npm install gulp-sass --save-dev

コンパイルのコーディング

①： まずはパッケージを使用できるように変数で宣言します

var sass = require('gulp-sass');
②: 実際にコンパイルを行う記述を書きます
処理の流れとしては以下
1. scss/ディレクトリ内のscssファイルのPATHを指定
2. scssファイルのコンパイル実行（エラーがある場合、出力）
3. css/ディレクトリにcssファイルを書き出す

// scss用のコンパイル作業
gulp.task('sass-compile', function(done){
    gulp.src('../scss/*.scss') // scssがあるパスを指定
        .pipe(sass().on('error', sass.logError)) // scssコンパイル実行
        .pipe(gulp.dest('../css')); // 書き出し先
    done();
});
③: 監視ファイルの対象にscssファイルを追記する
コンパイルされたと同時に、cssファイルが更新されるのでブラウザがリロードされます
// 監視ファイル
gulp.task('watch-files', function(done) {
    gulp.watch("../*/*.html", gulp.task('browser-reload'));
    gulp.watch("../*/*.css", gulp.task('browser-reload'));
    gulp.watch("../*/*.js", gulp.task('browser-reload'));

    //  この行を追加する
    gulp.watch("../*/*.scss",gulp.series('sass-compile'));

    done();
    console.log(('gulp watch started'));
});
④: gulpのタスクを実行したタイミングでコンパイルを実行するようにする
gulp.seriesのなかに'sass-compile'を追記します
gulp.task('default', gulp.series('build-server', 'watch-files', 'sass-compile', function(done){
    done();
    console.log('Default all task done!');
}));

動作確認

_devtoolsディレクトリ内でgulpというコマンドを実行してみると、ターミナル上で以下のようなログが出力されると思います。

$ gulp
** 省略 **
[16:41:03] Starting 'sass-compile'...
[16:41:03] Finished 'sass-compile' after 2.45 ms

上記のログがターミナルで出力されると、cssディレクトリ内にscssディレクトリで作成したファイル名でcssファイルが生成されていると思います。

├── css
│   └── sample.css
└── scss
    └── sample.scss

上記のようになっていると成功です。

エラーがあった場合の確認

上記のコンパイルをするプログラムでscssファイルの記述が間違えていたりすると、エラーがターミナルで出力されます。
scssファイルの記載を適当に間違えてみてください。以下のように出力されると思います。

Error in plugin "sass"
Message:
    ../scss/sample.scss
Error: Invalid CSS after "    margin:": expected expression (e.g. 1px, bold), was "}"
        on line 2 of ../scss/sample.scss
>>     margin: 

   -----------^

まとめ

gulpを使用してブラウザとsassコンパイル自動化する記事を書きました。
これがあるだけでコーディングする際の手間が結構減るはずです。

人気記事【独学者おすすめ】プログラミング学習動画サービス3選

人気記事プログラミング実務未経験者が自社開発エンジニアになるための方法

人気記事エンジニアを目指しているなら使用すべき5つの転職サイト



前の記事

次の記事

＼記事のシェアをお願いします！／

2019/04/07 Programming