HOME > TECHNOLOGY > 開発環境

ライブリロード環境(ローカルサーバー)の構築【WEBデザイナーのためのMac強化計画 #5】

Mac強化計画⑤

Mac強化計画シリーズも、いよいよ実践段階に入ってきました。

今回は、Node.jsのライブリロード環境、browser-syncをインストールしていきます。

それでは早速手順をみていきましょう!

GitHubにリポジトリを作成

GitHub

みなさん前回までの記事で、既にGitのアップデートお済みかと思います。
まだの方は、Mac強化計画シリーズで是非環境を構築してくださいね。

【特集記事】未経験WEBデザイナーのためのPROが教えるMac強化計画
管理人:佐藤が長年の経験を元に、WEBデザイナーにベストマッチのMac開発環境を伝授します。
既にキャリアをスタートしているWEBデザイナーだけでなく、これからWEBデザイナーを目指す未経験者にもおすすめです!

以下の画面を参考にGitHubでリポジトリを作成します。

GitHub - リポジトリのエントリー画面

Create repositoryを押してこんな画面が出たら成功です。

GitHub - リポジトリ画面

どうですか、出ましたか?

デスクトップにクローン

次に、作業ディレクトリに移動して、先ほど作ったリポジトリをクローンします。

ターミナルで以下のようなコマンドを打ってください。

$ cd <あなたのプロジェクトフォルダ>
$ git clone https://github.com/<あなたのGitHubリポジトリ>

git cloneに続くURLはGitHubのUIから取得できます。

GitHub - リポジトリURLの取得ボタン

プロジェクトフォルダに移動して、README.mdというファイルができていれば成功です。

.gitignoreの作成

Gitには管理下に置かないファイルやディレクトリを予め決めておく機能があります。
.gitignoreという名前のテキストファイルに、ファイル名やディレクトリ名を指定しておきましょう。

これを指定するのを忘れると、意図せず機密文書をネットに公開してしまうことになりかねません。

確実に作成しておきましょう!

以下、このブログで紹介しているソースコード用の.gitignoreです。

dist
app
conf
log
node_modules
yarn-debug.log*
yarn-error.log*
.env
.vscode
.history
.DS_Store
*.code-workspace

プロジェクトの初期化

プロジェクトの初期化(開始)には、yarn initというコマンドを使います。
Yarnをまだ導入していない人は、Mac強化計画シリーズで一通りの流れを解説しています。

ターミナルから以下のコマンドを入力します。

$ yarn init

対話型のインストールですので、以下を参考に入力してください。

yarn init v1.22.0
question name (sample-portfolio01): 
question version (1.0.0): 
question description: 
question entry point (index.js): dist/
question repository url (https://hq9-sato@github.com/hq9-sato/sample-portfolio01.git): - GitHubのリポジトリをクローンしたフォルダであれば勝手にアドレスが入力される
question author (hq9-sato ): - GitHubのリポジトリをクローンしたフォルダであれば勝手にユーザー名が入力される
question license (MIT): 
question private: true - 意図しない公開を防ぐ
success Saved package.json

package.jsonの中身を確認してみましょう。

対話型のインストールですので、以下を参考に入力してください。

{
  "name": "sample-portfolio01",
  "version": "1.0.0",
  "main": "dist/",
  "repository": "https://hq9-sato@github.com/hq9-sato/sample-portfolio01.git",
  "author": "hq9-sato ",
  "license": "MIT",
  "private": true
}

初期化で指定した内容で間違いなけれはOKです。

Gulpのインストール

gulp

開発環境にGulpガルプを導入します。

Gulpはタスクランナーと呼ばれるツールの一つで、HTMLコーディング作業の状況を監視し、自動的に様々な処理を実行してくれるツールです。
モダンなWEB開発では、Gulpのような監視システムの利用が必須になっています。

ぜひこの機会に導入をしてみましょう。

Gulpについては以下記事も参考にしてみてください。

コラム:良い子なのでGulpの誤解を解きたい!
私はフルスタックエンジニアとして、10年ほどタスクランナーの使用経歴があります。5年程前にはGulpを称賛する声も多かったのですが、いくつか誤解を招く情報があったこともあり最近あまり聞かなくなりました。
毎日使っている私としては、とても良いものなので、誤解を解いてあげたいと強く願っています。是非内容確認してみてください。

Gulpは開発環境ごと(ローカル(にインストールする方法と、グローバル(どこでも実行可能)でインストールする方法があります。

どこでも実行可能と聞くと得した気分になりますが、現実的にはプロジェクトごとのバージョン合わせが煩雑になりメリットはほとんどありません。
ローカルインストールのデメリットは、プロジェクトのファイルサイズが増えてしまいまうことぐらいでしょうか?

GulpはYarnを使ってローカル環境にインストールしましょう。

$ yarn add -D gulp
yarn add v1.22.0
- 中略 -

インストールが終わったら念のため確認します。

$ yarn gulp -v
CLI version: 2.2.0
Local version: 4.0.2

ライブリロード環境の構築

HTMLの開発にはhttpプロトコルで表示できるサーバー環境が必要になります。

最近では、IDE(開発エディタ)にサーバーが内蔵されているケースも増えてきましたが、フロントエンドのワークフローでは少々扱い辛い印象があります。
モダンなWEB開発では、様々な自動実行処理をバックグラウンドで動かします。
その都度ブラウザをリロードするとなると、累積にすると物凄い時間のロスが発生してしまいます。

そのため、最近のワークフローではライブリロード環境を構築して、自動でブラウザをリフレッシュしながら開発していくスタイルが一般的になっています。

ライブリロード環境にもたくさんの選択肢がありますが、今回は最も一般的なbrowser-syncをインストールしていきます。

$ yarn add -D browser-sync

続いて、gulpfile.jsという名前で作業ディレクトリルートにファイルを作成します。
以下のようにbrowser-syncを起動するタスクを作成します。

const gulp = require('gulp');
const server = require('browser-sync');
    
function serverInit(done) {
  server.init({
    server: {baseDir: 'dist'}
  });
  done();
}

gulp.task('sync', serverInit);

ライブリロードサーバーを起動してみます。

yarn gulp sync

WEBブラウザーがhttp://localhost:3000というアドレスで起動しましたね!


WEBブラウザーをが起動できましたか?

GulpはWEB開発を格段に効率化できるツールです。
あなたが未経験のWEBデザイナー志望者だったとしても、絶大な恩恵がありますので是非導入してみてくださいね!

Gulpをもっと詳しく知りたい方は、以下書籍で学習してください。

コマンドラインの基本から環境の構築、実践的なテクニックと順を追って学べる内容です。とにかく忙しい/もっと楽をしたいというWeb制作者にお勧めの1冊です。

田畑を耕しながら田舎でのんびりWEB開発?
若い頃から準備すれば誰にでもできますよ!
今に疲れているクリエイターの方々の少しでも参考になれば嬉しいです。