状況

PHPのプロジェクトだが、Gulpを使ってCSSの圧縮をしている
開発環境はDockerで構築している
コンテナのオーケストレーションにはDocker Composeを使っている

ディレクトリ構成

多少省略しているが、こんな感じ。

app
|-- index.php
|-- gulpfile.js          <-- これ
|-- docker-compose.yml
`-- docker
     |-- db
     |   |-- Dockerfile
     |   `-- my.cnf
     |-- nodejs
     |   `-- Dockerfile  <-- これ
     `-- web
         `-- Dockerfile

やったこと

アプリ側はこんな感じ

index.php

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/assets/css/style.min.css">
  </head>
</html>

下記のgulpfile.jsを作成
簡略化しているので動かないかも

gulpfile.js

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('watch', function() {
  return gulp.src('./**/*.scss')
    .pipe($.plumber())
    .pipe($.sass())
    .pipe($.pleeease({
      autoprefixer: {
        browsers: ['last 2 versions', 'android >= 4', 'ios >= 8']
      },
      minifier: true,
    }))
    .pipe(gulp.dest('public/assets/css'));
});

下記のDockerfileを作成

docker/nodejs/Dockerfile

FROM node:latest

RUN npm install -g gulp

WORKDIR /app
CMD gulp watch

docker-compose.ymlに追記

docker-compose.yml

web:
    build: ./docker/web
    links:
        - db
    volumes:
        - ./:/app
    ports:
        - "8000:8000"

db:
    build: ./docker/db
    environment:
        MYSQL_ROOT_PASSWORD: root
        MYSQL_DATABASE: hoge
        MYSQL_USER: hoge
        MYSQL_PASSWORD: hoge

nodejs:
    build: ./docker/nodejs
    volumes:
        - ./:/app

volumesで、gulpからファイルが操作できるようにしている。

使い方

docker-compose up -d

するだけで、gulp watchが走る。

初回起動時だけ、node_modulesを入れるために

docker-compose run nodejs npm install

をする必要があるかもしれない。

DockerコンテナでGulpを動かす

状況

ディレクトリ構成

やったこと

使い方