Docker でGulp が実行できる環境を構築した話

はじめに

Windows でGulp を使おうとしたら、 Mac では動いたはずなのに、なぜか動かなくてやる気をなくしたことがあります……。

きっとパスを通すなど、頑張って設定すれば良いのでしょうが、 めんどくさく感じ、あきらめてしまいました……。

そんなとき、ふとDocker の存在を思い出しました。

Docker コンテナなら、ある意味別OS が動くのと同じなので、 Windows 由来の煩わしい部分を吸収？してくれるんじゃないかと。

……ということで、参考文献をもとにまとめてみました。

つくったもの

下記のことができるコンテナを作りました。

• 作業フォルダーのファイル保存時に、ファイルを本番公開用フォルダーにコピーします
• 本番公開用フォルダー内のコンテンツを8000 ポートで外部公開します

今は、ファイルのコピーをしているだけですが、 Gulp タスクを編集し、Docker イメージを作り直すことで、 お好みのタスクの実行環境ができます。

ソースコードはGitHub で公開しました。 GulpOnDocker

使い方

下記の順で記載します。

1. フォルダー構成
2. 検証環境
3. Visual Studio Code + Docker プラグインの場合
4. コマンドの場合

フォルダー構成

root/
    + app/
        + source/           開発中のコードの配置場所
        + wwwroot/          発行済みファイルの配置場所
    + .dockerignore
    + docker-compose.yml
    + Dockerfile
    + gulpfile.js           Gulp タスク定義
    + package.json          npm スクリプトと依存関係の定義

検証環境

※Mac + Docker では、Visual Studio Code + Docker プラグインの方法で検証しました。 s ※Windows + Docker Toolbox では、コマンドでやる方法を検証しました。

Visual Studio Code + Docker プラグインの場合

必要な設定

• Visual Studio Code
• Docker プラグイン
  → Visual Studio Code で使えるDocker のプラグインです。

起動手順

1. Docker を起動します。
2. Visual Studio Code で、プロジェクトを開きます
3. コマンドパレットで、下記を入力します

Docker: Compose Up

終了手順

1. Visual Studio Code のコマンドパレットで、下記を入力します

Docker: Compose Down

コマンドの場合

起動手順

1. Docker Quickstart Terminal を起動します。
2. 下記コマンドを使って、プロジェクトのあるパスに移動します

cd (プロジェクトのあるパス)

3. 下記コマンドで、Docker-compose を起動します。

docker-compose -f docker-compose.yml up

終了手順

1. 下記コマンドで、Docker-compose を終了します。

docker-compose -f docker-compose.yml down

おわりに

Docker を使うことで、Windows でもGulp を手軽に使えるようになりました。

これを使って、ブログ の改修を進めていければと思います(#^^#)

参考文献

Docker

• Docker for Windows のインストール (2017/07/03)
• Install Docker for Mac (2017/07/03)

実行環境の構築時

• DockerコンテナでGulpを動かす (2017/07/03)
• How to install gulp on a docker with docker-compose (2017/07/03)