Dockerでgulp（+gulp-compass）実行環境を構築

6011 ワード
Docker gulp Compass Compass テキストリンク

背景

gulpの実行を他のPCでもできるようにせねば。

自分のローカル環境では適当に構築していたのだが、
いちいちインストールするのも面倒だし、諸々な差分が発生して面倒。
dockerコンテナにしてやれば構築・配布が容易だろう、と考えた。

Dockerコンテナでやりたいこと

dockerでgulpおよびgulp-compassの実行

gulp-compassは「sassのフレームワークCompassをgulpで動かすライブラリ」だと思われる

  • gulp+watchが走ってる
  • gulp-compassが実行できる
  • コンパイル結果がローカル環境にも反映される

よくは知らないが、gulp-compassはrubyの力で動くので、rubyのインストールも必要だ。

今回使うディレクトリ構成

これあると、わかりやすいよね

root/
　├ docker/
　│　└ node/
　│　　　└ Dockerfile
　│
　├ public/
　│　└ resources/
　│
　├ scss/
　│
　├ docker-compose.yml
　└ gulefile.js

Dockerの設定

Dockerfile
FROM node:6.10.1

RUN mkdir -p /workspace
WORKDIR /workspace

# ruby install prepare
RUN apt-get update && apt-get install -y \
    autoconf \
    bison \
    build-essential \
    libssl-dev \
    libyaml-dev \
    libreadline6-dev \
    zlib1g-dev \
    libncurses5-dev \
    libffi-dev \
    libgdbm3 \
    libgdbm-dev \
    git

# rbenv clone
RUN git clone https://github.com/sstephenson/rbenv.git /usr/local/rbenv
RUN git clone https://github.com/sstephenson/ruby-build.git /usr/local/rbenv/plugins/ruby-build

# rbnev setting
RUN echo 'export RBENV_ROOT="/usr/local/rbenv"' >> /etc/profile.d/rbenv.sh
RUN echo 'export PATH="${RBENV_ROOT}/bin:${PATH}"' >> /etc/profile.d/rbenv.sh
RUN echo 'eval "$(rbenv init --no-rehash -)"' >> /etc/profile.d/rbenv.sh

# ruby install
ENV ruby_version="2.3.3"
RUN . /etc/profile.d/rbenv.sh; rbenv install ${ruby_version}; rbenv global ${ruby_version};
RUN . /etc/profile.d/rbenv.sh; gem install -n /usr/local/bin compass --pre

# npm install
COPY package.json ./
RUN npm install -g gulp-cli
RUN npm install

CMD ["gulp"]

gulpだけだったらややこしくなかったんですが、ruby入れるのが大変。。
（今更ですが、ベースのimageをrubyよりに変えた方が良かったかも）

nodeやrubyのバージョンはローカル環境に合わせただけ。特に深く考えていない。

docker-compose.yml
version: '3'
services:
  gulp:
    container_name: gulp
    build:
     context: ./
     dockerfile: ./docker/node/Dockerfile
    volumes:
      - ./public/resources/:/workspace/public/resources #コンパイル先
      - ./scss/:/workspace/scss #コンパイル元
      - ./gulpfile.js:/workspace/gulpfile.js #gulpfile
    tty: true

上のDockerfileを元に構築してくれる。

buildのcontext, dockerfileはDockerfileのある場所からresourcesを参照できないため設定した。

volumesにてコンパイル元とコンパイル先をローカル環境と同期させる。
gulpfileは特にリンクさせる必要がないけど、リンクしておくとgulpの動作をローカルで変更できるようになる

補足

落とし穴というか、詰まったところを解説

Dockerfile

RUN . /etc/profile.d/rbenv.sh; rbenv install ${ruby_version}; rbenv global ${ruby_version};

rbenv: command not found　でまくったので、pathを読み込んで実行
sourceコマンドもnot foundになったのでピリオド(.)で読み込む

RUN . /etc/profile.d/rbenv.sh; gem install -n /usr/local/bin compass --pre

installもrbenv読み込みからやった。（やらないとgem not foundで怒られた）
nオプションでgemのインストール先をrubyと同じパスに置いてやり、--preで（たぶん）

あと、割とbuildに時間がかかります。特にInstalling rubyに。

Java SwitchとIf elseの使用効率の比較と分析
Rubyでのpublic、private、protectedの区別小結